O www.epubit.com 


|e 8S Sh tt = gr Enem 
学 | LEARNING AND INFORMATION LLC 








TF 四 机 图形 学 编 
y 使 用 Open 


COMPUTER GRAPHICS 
PROGRAMMING 


IN OPENGL WITH C++ 





a V. SCOTT GORDON AND JOHN CLEVENGER B 





WZ POSTS & TELECOM PRESS 


py taime Z Abiha 


计算 机 图 形 学 编程 (使 用 OpenGL 和 C++) 


Computer Graphics Programming in OpenGL with C++ 




















Rd 


本 书 使 用 OpenGL 和 C++， 教 授 现代 3D E 程 。 本 书 从 图 形 编程 的 基础 和 准备 工 
作 开 始 ， 介 绍 了 着 色 器 的 各 个 阶段 ， 包 括 建 模 、 光 照 、 纹 理 等 基础 知识 ， 以 及 曲面 细 分 、 柔 和 阴影 、 
生成 逼真 的 材质 和 环境 等 高 级 技术 实现 。 
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ABARA ERESZ, GID PERN BIR. eH. WE, KREBURERX 
贴图 ， 既 适合 作为 高 等 院 校 计算 机 相关 专业 的 计算 机 图 形 编程 课程 的 教材 或 辅导 书 ， 也 适合 对 计算 
机 图 形 编程 感 兴趣 的 读者 自学 。 
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TaS 
本 书 具 有 以 下 特色 : 

e Æ% C++ 中 的 现代 OpenGL 4.0+ 着 色 器 编程 ; 
e ”使 用 可 运行 的 代码 示例 讲解 所 有 技术 ， 提 供 完整 的 源 代 码 以 及 详细 的 讲解 。 
° 详细 讲解 每 个 GLSL 可 编程 管线 阶段 ( 顶点 阶段 、 曲 面 细 分 阶段 、 几 何 阶段 以 及 片段 阶段 ) 。 
e 研究 有 关 建 模 、 光 照 、 阴影 ( 包括 柔和 阴影 )、 地 形 以 及 3D 材质 ( 例如 木材 和 大 理 石 ) 的 实例 。 
e 介绍 现代 开发 工具 (如 NVIDIA Nsight 调试 器 ) ， 以 及 如 何 用 其 优化 代码 、 提 高 性 能 。 
e 提供 书 中 使 用 的 所 有 源 代 码 、 模 型 、 图 表 、 纹 理 、 天 空 盒 、 天 空 窜 顶 、 高 度 贴图 和 法 线 贴 图 。 
e ”本 书 为 授课 教师 提供 PPT、 习 题解 答 、 课 程 大 纲 等 教学 辅助 资源 ， 请 通过 contact@ 
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内 容 提要 


本 书 以 C++ 和 OpenGL 作为 工具 ， 教 授 计算 机 图 形 学 编程 。 全 书 共 14 章 和 3 个 附录 。 
首先 从 图 形 编程 的 基础 和 准备 工作 开始 ， 依 次 介绍 了 OpenGL 图 像 管线 、 图 形 编程 数学 基 
础 、 管 理 3D 图 形 数据 、 纹 理 贴图 、3D 模型、 光照、 阴影、 天空 和 背景 、 增 强 表面 细节 、 
参数 曲面 、 曲 面 细 分 、 几 何 着 色 器 ， 以 及 其 他 相关 的 图 形 编 程 技术 。 附 录 分 别 介绍 了 Windows, 
macOS 平台 上 的 安装 设置 ， 以 及 Nsight 图 形 调试 器 的 应 用 。 本 书 每 章 最 后 配备 了 不 同形 式 
的 习题 ， 供 读者 巩固 所 学 知识 。 

本 书 适 合作 为 高 等 院 校 计算 机 科学 专业 的 计算 机 图 形 编程 课程 的 教材 或 辅导 书 , 也 适合 
对 计算 机 图 形 编程 感 兴趣 的 读者 自学 。 
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本 书 的 主要 目标 是 用 作 计 算 机 科学 专业 本 科 OpenGL 3D 图 形 编程 相关 课程 的 教材 。 同 
时 ， 我 们 也 付出 了 很 大 的 努力 ， 让 本 书 成 为 一 本 无 须 配 合 课程 使 用 的 自学 教材 。 在 以 这 两 
者 为 目标 的 前 提 下 ， 我 们 尽力 将 内 容 解释 得 简单 而 清晰 。 本 书 中 的 所 有 代码 示例 都 已 经 尽 
可 能 地 简化 ， 同 时 没有 破坏 其 完整 性 ， 以 便 读 者 可 以 直接 运行 。 

我 们 期 望 本 书 与 众 不 同 的 一 点 是 ， 新 手 〈 刚 接触 3D 图 形 编程 的 人 ) 更 容易 学 习 。 关 于 
这 个 主题 的 学 习 资 料 从 来 都 不 匮乏 ， 恰 恰 相 反 ， 很 多 新 手 刚 入 门 的 时 候 ， 相 关 的 资料 就 扑 
面 而 来 了 。 我 们 刚 接触 3D 图 形 编 程 的 时 候 ， 就 期 望 能 遇见 这 样 的 教材 一 一 一 步 步 解 释 基 础 
概念 ， 循 序 渐进 并 有 序 地 梳理 进 阶 概念 ， 因 此 我 们 也 尝试 将 本 书 编写 成 这 样 的 教材 。 我 们 
曾 想 将 本 书 命名 为 shader programming made easy 《轻松 学 着 色 器 编程 ))， 虽 然 我 们 并 不 认 
为 有 什么 方法 能 真 的 让 着 色 器 编程 变 得 “轻松 ” 但 我 们 希望 本 书 能 够 帮助 你 尽 可 能 地 达成 
这 个 目标 。 

本 书 使 用 C++ 进行 OpenGL 编程 教学 。 使 用 C++ 学 习 图 形 编程 有 以 下 几 个 好 处 。 

@ HF OpenGL 的 原生 语言 是 C， 因 此 C++ 程序 可 以 直接 进行 OpenGL 函数 调用 。 

© “C++ 编写 的 OpenGL 应 用 程序 通常 有 着 很 好 的 性 能 。 

@ C++ 提供 C 语言 所 没有 的 现代 编程 结构 〈 类 、 多 态 等 )。 

© 在 OpenGL 社区 中 ，C++ 是 一 个 热门 选项 。 许 多 OpenGL 的 教学 资源 有 C++ 版 本 。 

值得 一 提 的 是 ，OpenGL 也 存在 着 与 其 他 语言 绑 定 。 常 见 的 有 Java, CH, Python 等 ,但 
本 书 仅 关 注 C++。 

本 书 与 众 不 同 的 另 一 点 是 它 有 一 个 Java 版 , 英文 书 名 是 Computer Graphics Programming 
in OpenGL with Java。 这 两 本 书 是 按 同样 的 节奏 组 织 的 ， 它 们 使 用 相同 类 型 的 章节 编号 、 主 
题 、 图 表 、 习 题 和 讲解 方式 ， 其 代码 组 织 方式 也 尽 可 能 地 相似 。 诚 然 ， 使 用 C++ 或 Java 编 
程 肯定 有 着 相当 大 的 差异 。 尽 管 如 此 ， 我 们 相信 这 两 本 书 提供 了 几乎 相同 的 学 习 路 径 ， 甚 
至 可 以 让 选修 同一 门 课 的 学 生 使 用 不 同 的 语言 版 本 作为 教材 。 

需要 说 明 的 一 点 是 ，OpenGL 有 着 不 同 的 版 本 〈 稍 后 简 述 ) 和 不 同 的 变 体 。 例 如 ， 在 标 
HE OpenGL《〈 也 称 桌 面 OpenGL) 之 外 ， 还 有 一 个 变 体 叫 作 OpenGL ES。 它 是 为 谋 入 式 系统 
(Embedded System) 的 开发 而 定制 的 《因此 称 为 ES )。“ 赎 入 式 系统 ”包括 手机 、 游 戏 主 机 、 
汽车 和 工业 控制 系统 之 类 的 设备 。OpenGL ES 的 大 部 分 内 容 是 标准 OpenGL 的 子 集 ， 删 除 
了 嵌入 式 系统 通常 用 不 到 的 很 多 操作 。OpenGL ES 还 增加 了 一 些 功能 ， 通 常 是 特定 目标 环 
境 下 的 特定 功能 。 本 书 侧重 于 标准 OpenGL. 

OpenGL 的 另 一 种 变 体 称 为 WebGL。WebGL 基于 OpenGL ES， 它 的 设计 目标 是 支持 在 
浏览 器 中 运行 OpenGL. WebGL 允许 应 用 程序 通过 JavaScript 进行 OpenGL ES 操作 调用 ， 
从 而 简单 地 将 OpenGL 图 形 嵌 入 标准 HTML (Web) 文档 中 。 大 多 数 现代 Web 浏览 器 ， 包 
括 Apple Safari. Google Chrome, Microsoft Internet Explorer, Mozilla Firefox 和 Opera， 支 
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持 WebGL. HF Web 编程 超出 了 本 书 的 讨论 范围 ， 因 此 本 书 不 会 涵盖 WebGL. Pit, H 
于 WebGL 基于 OpenGL ES, 而 OpenGL ES 又 基于 标准 OpenGL, 因此 本 书 所 涵盖 的 大 部 分 
内 容 可 以 直接 迁移 到 这 些 OpenGL 变 体 的 学 习 中 去 。 

3D 图 形 编程 这 个 主题 通常 让 人 想起 精美 而 宏大 的 画面 。 事 实 上 ， 许 多 相关 热门 教材 中 
充满 了 令 人 惊叹 的 场景 ， 很 大 程度 上 是 为 了 吸引 读者 翻阅 他 们 的 图 库 。 虽 然 我 们 认同 这 些 
图 例 的 激励 作用 ， 但 我 们 的 目标 是 教学 而 非 令 人 惊叹 。 本 书 中 的 图 像 仅 仅 是 示例 程序 的 输 
出 。 由 于 本 书 只 是 入 门 教程 ， 其 泻 染 的 场景 应 该 无 法 让 专家 侧目 。 然 而 ， 本 书 呈 现 的 技术 
确实 是 构成 当今 这 些 炫 目 3D 效果 的 基础 。 

我 们 没有 尝试 写 一 本 “OpenGL 参考 大 全 ”， 因此， 本 书 所 涵盖 的 OpenGL 部 分 只 是 其 所 
有 功能 中 的 一 小 部 分 。 我 们 的 目标 是 以 OpenGL 作为 基础 工具 ， 教 授 基 于 现代 着 色 器 的 3D 
图 形 编程 ， 并 为 读者 提供 足够 深入 的 理解 ， 以 供 进一步 研究 。 


目标 读者 


本 书 的 主要 目标 读者 是 计算 机 科学 专业 的 学 生 ( 可 以 是 本 科 在 读 学 生 )， 其 实 任何 想 要 
学 习 计 算 机 科学 相关 知识 的 人 也 适合 阅读 本 书 。 因 此 ， 我 们 假设 读者 有 扎实 的 面向 对 象 编 
程 基 础 ， 至 少 相 当 于 计算 机 科学 专业 大 二 或 大 三 学 生 的 水 平 。 

还 有 一 些 本 书 没有 涵盖 的 内 容 ， 因 为 我 们 假设 读者 已 经 掌握 了 足够 的 背景 知识 ， 包 括 : 
C++ 及 其 常用 库 ， 如 标准 模板 库 (Standard Template Library ); 
熟悉 集成 开发 环境 (Integrated Development Environment，IDE)， 如 Visual Studio; 
事件 驱动 编程 概念 ; 
基础 矩阵 代数 、 三 角 函 数 ; 
了 解 颜色 模型 ， 如 RGB、RGBA 等 。 

希望 本 书 的 潜在 受众 能 够 因为 对 其 Java 版 的 喜爱 而 进一步 支持 本 书 。 正 如 前 面 所 说 的 ， 
我 们 期 望 看 到 这 样 一 种 情景 一 一 学 生 在 同一 门 课 中 可 以 自由 选择 使 用 C++ 或 Java 版 本 的 教 
材 。 由 于 这 两 本 书 按 同样 的 节奏 对 教学 内 容 进行 组 织 编排 ， 因 此 我 们 认为 可 以 尝试 以 这 种 
开放 的 方式 来 开展 课程 教学 和 学 习 。 


如 何 使 用 本 书 


本 书 从 内 容 安排 上 适合 从 前 往 后 阅读 ， 即 后 面 各 章 中 的 内 容 经 常 依赖 于 前 面 各 章 中 所 
讲 的 内 容 。 因 此 ， 在 各 章 中 来 回 跳跃 地 选择 性 阅读 可 能 并 不 适合 本 书 ， 读 者 最 好 逐 章 顺序 
阅读 。 

本 书 同时 可 以 作为 实用 的 动手 指南 。 由 于 已 经 有 许多 其 他 偏 理 论 的 学 习 材 料 ， 因 此 读者 
应 该 将 本 书 作为 一 本 “练习 有 册 ” 通过 一 边 参 考 本 书 一 边 自己 动手 编程 来 理解 基础 概念 。 虽 
然 我 们 为 所 有 的 示例 提供 了 代码 ， 但 是 想 要 真正 理解 这 些 概念 ， 还 是 得 自己 动手 “实现 ” 
这 些 代 码 一 一 通过 编程 来 搭建 你 自己 的 3D 场景 。 

本 书 在 第 2 章 到 第 14 章 的 最 后 都 留 给 读者 一 些 习 题 。 有 的 题 比 较 简单 ， 仅 仅 需要 对 提 
供 的 代码 进行 简单 改动 就 可 以 解决 。 那 些 标记 为 “项 目 ” 的 习题 ， 则 需要 读者 花费 更 多 的 
时 间 来 解答 ,因为 可 能 需要 编写 大 量 代码 或 者 使 用 多 个 示例 中 用 到 的 技术 。 少 数 标记 为 “ 研 
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究 ” 的 习题 ， 则 在 本 书 中 并 没有 提供 解 题 需要 学 习 的 细节 知识 ， 我 们 鼓励 读者 进行 自主 学 
习 并 解答 。 

OpenGL 调用 通常 会 有 很 长 的 参数 列表 。 在 撰写 本 书 时 ， 两 位 作者 在 每 种 情况 下 都 会 讨 
论 是 否 要 描述 所 有 的 参数 。 最 终 我 们 决定 在 最 初 的 部 分 描述 所 有 参数 。 随 着 主题 深入 ， 我 
们 避免 在 每 次 OpenGL 调用 中 陷入 细 枝 末节 的 描述 过 程 〈 因 为 调用 的 次 数 很 多 )， 以 防 读者 
失去 对 全 局 的 理解 。 因 此 ， 在 浏览 示例 时 ， 读 者 需要 在 手边 准备 OpenGL 和 所 使 用 的 各 种 
库 的 参考 资料 。 

为 此 ， 我 们 建议 结合 一 些 优秀 的 在 线 资源 使 用 本 书 。OpenGL 的 文档 是 绝对 必要 的 。 有 
关 各 种 命令 的 详细 信息 ， 可 以 利用 搜索 引擎 ， 或 访问 OpenGL 的 官方 网 站 获取 。 

我 们 的 示例 中 用 到 了 称 作 GLM 的 数学 库 。 在 安装 GLM ( 见 附录 ) 后 ,读者 应 该 找到 其 
在 线 文档 并 将 其 加 入 书签 。 

本 书 中 经 常用 到 的 另 一 个 库 是 SOIL2， 用 于 读 取 和 处 理 纹理 图 像 文件 ， 读 者 可 能 也 需 
要 定期 查阅 它 的 文档 。SOIL2 没有 中 心 化 的 文档 资源 ， 但 读者 通过 Web 搜索 可 以 找到 一 
些 例子 。 

还 有 许多 关于 3D 图 形 编程 的 图 书 , 我 们 建议 与 本 书 并 行 阅读 (例如 要 解决 各 章 后 的 “ 研 
究 ” 问 题 )。 以 下 是 我 们 经 常 提 到 的 5 本 。 

@ [SW15] Sellers et al. OpenGL SuperBible. 

@ [KS16] Kessenich et al. OpenGL Programming Guide. 

@ [W013] Wolff, OpenGL 4 Shading Language Cookbook. 

© [AS14] Angel and Shreiner, Interactive Computer Graphics. 

© [LU16] Luna, Introduction to 3D Game Programming with DirectX 12. 


配套 资源 


本 书 提 供 随 书 的 配套 资源 供 读者 下 载 ， 其 内 容 有 : 

书 中 所 有 C++ / OpenGL 程序 和 相关 的 实用 类 文件 以 及 GLSL 着 色 器 代码 ; 
各 种 程序 和 示例 中 使 用 的 模型 和 纹理 文件 ; 

用 于 制作 天 室 和 地 平 线 的 天 空 项 和 立方 体贴 图 图 像 文件 ; 

用 于 照明 和 表面 细节 效果 的 法 线 贴图 和 高 度 贴 图 ; 

本 书 中 所 有 的 图 表 以 图 像 文 件 形式 提供 。 

上 述 文 件 也 可 以 通过 访问 异步 社区 (www.epubit.com) 上 的 本 书页 面 获取 。 


教师 辅助 


我 们 鼓励 大 学 或 学 院 的 教师 获取 本 书 的 教师 辅助 包 ， 其 中 包含 以 下 附加 项 : 
@ 一 套 完整 的 PowerPoint 约 灯 片 ， 涵 盖 本 书 中 的 所 有 主题 ; 

@ 本 书 中 大 多 数 章 末 习 题 的 答案 和 所 需 代 码 ; 

@ 基于 本 书 的 课程 大 纲 示 例 ; 

@ 每 章 用 于 讲解 材料 的 额外 内 容 。 

教师 辅助 包 可 以 通过 联系 出 版 商 获 取 : contact@epubit.com.cn。 
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和 柏林 噪声 (第 14 章 ) 出现 的 问题 进行 了 非常 详细 的 修正 。 他 们 的 建议 帮助 我 们 对 本 书 进 
行 了 改进 。 我 们 还 收 到 了 许多 来 自 不 同学 校 的 学 生 提 出 的 问题 ， 这 些 问题 帮助 我 们 评估 了 
我 们 编写 方法 的 优 缺 点 。 

我 们 对 本 系列 书 的 第 一 次 试用 是 在 2017 年 的 秋天 , 当时 我 们 的 同事 Pinar Muyan-Ozcelik 
博士 在 她 教授 的 CSc-155 课程 上 第 一 次 使 用 了 Computer Graphics Programming in OpenGL 
with Java， 这 让 我 们 有 机 会 评估 我 们 是 否 实现 了 让 本 书 成 为 “自学 ”资源 的 目标 。 课程 进展 
顺利 的 同时 ，Pinar Muyan-Ozcelik 博士 也 为 每 章 留存 了 问题 和 更 正 日 志 。 这 份 日 志 帮 我 们 对 
本 书 进行 了 许多 改进 。 

Martin Lucas Golini 是 SOIL2 纹理 图 像 处 理 库 的 开发 者 和 维护 者 ， 也 对 本 书 表现 出 了 极 
大 的 支持 和 热情 。 我 们 对 他 的 帮助 表示 非常 感谢 。 

Jay Turberville 来 自 于 亚利桑那 州 Scottsdale 的 Studio 522 Productions。 他 创建 了 本 书 英 
文 版 的 封面 和 书 中 用 到 的 海豚 模型 ， 学 生 们 非常 喜欢 。Studio 522 Productions 制作 出 极 高 质 
量 的 3D 动画 和 视频 ， 以 及 自 定 义 3D 建 模 。 我 们 很 感谢 Turberville 慷慨 地 为 本 书 创建 这 个 
精美 的 模型 。 

我 们 还 要 感谢 其 他 一 些 艺术 家 和 研究 人 员 。 他 们 非常 慷慨 地 让 我 们 使 用 他 们 的 模型 和 
纹理 。 来 自 Planet Pixel Emporium 的 James Hastings-Trew 提供 了 许多 行星 表面 纹理 。Paul 
Bourke 允许 我 们 使 用 他 拥有 的 精彩 的 星 域 。 斯 坦 福 大 学 的 Marc Levoy 博士 授权 我 们 使 用 
著名 的 “斯 坦 福 龙 ”模型 。Paul Baker 的 凹凸 贴图 教程 是 我 们 在 许多 例子 中 使 用 的 “ 圆 环 ” 
模型 的 基础 。 我 们 还 要 感谢 Mercury Learning 允许 我 们 使 用 《DirectX 12 3D 游戏 开发 实 
He) "中 的 一 些 纹理 。 

Danny Kopec 博士 向 我 们 介绍 了 Mercury Learning 公司 ， 并 向 它 的 出 版 商 David Pallai 
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我 们 与 Kopec 的 电话 交谈 也 对 我 们 非常 有 帮助 。 Kopec 博士 的 早 逝 让 我 们 深 感 翡 痛 , 也 对 他 
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®© «DirectX 123D 游戏 开发 实战 》 已 由 人 民 邮 电 出 版 社 出 版 (ISBN 978-7-115-47921-1)。 一 一 编者 注 
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最 后 ， 我 们 要 感谢 Mercury Learning 的 David Pallai 和 Jennifer Blaney， 他 们 一 直 保持 着 
对 这 个 项 目的 热情 并 引导 我 们 完成 了 本 书 的 整个 出 版 流程 。 


勘误 


如 果 你 在 阅读 本 书 时 发 现任 何 错误 ， 请 告诉 我 们 ! 尽管 我 们 尽 了 最 大 努力 ， 但 本 书 肯定 
还 有 错误 。 当 收 到 错误 报告 时 ， 我 们 将 会 尽 最 大 努力 尽快 发 布 。 我 们 建立 了 一 个 用 于 收集 
并 发 布 勘误 的 网 页 : 


http://athena.ecs.csus.edu/~gordonvs/errata.html : 


出 版 商 Mercury Learning 也 保留 了 本 书 勘 误 表 页 面 的 链接 。 因此 ， 如 果 我 们 的 勘误 页 面 
的 URL 有 变动 ， 请 查看 Mercury Learning 网 站 以 获取 最 新 链接 。 
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V. 斯 科 特 。 戈 登 (V. Scott Gordon) 博士 已 经 在 加 州 州立 大 学 系统 担任 教授 有 20 多 年 ， 
目前 在 加 州 州立 大 学 萨克拉门托 分 校 教授 高 级 图 形 和 游戏 工程 课程 。 他 撰写 及 合 著 了 30 多 
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游戏 架构 教学 的 软件 框架 和 工具 的 开发 人 员 ， 其 中 包括 我 们 Java 版 第 一 版 书 中 所 用 到 的 
graphicslib3D 库 。 他 是 国际 大 学 生 程序 设计 竞赛 (ICPC) 的 技术 总 监 ， 负 责 监督 PC? 的 持 
EFR. PO 是 目前 世界 上 使 用 较为 广泛 的 编程 竞赛 支持 系统 。 克 莱 维 吉 博 士 在 加 州 大 学 戴 
维 斯 分 校 获得 博士 学 位 。 
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资源 与 支持 


本 书 由 异步 社区 出 品 ， 社 区 〈https:Wwww.epubit.com/) 为 您 提供 相关 资源 和 后 续 服 务 。 


配套 资源 


本 书 提供 如 下 资源 : 

@ 本 书 配套 源 代码 ; 

@ 书 中 用 到 的 模型 、 图 形 、 纹 理 和 贴图 等 ; 

e 书 中 彩 图 文件 。 

要 获得 以 上 配套 资源 ， 请 在 异步 社区 本 书页 面 中 单 击 眶 :开胃 ， 嘴 转 到 下 载 界 面 ， 按 提 
示 进 行 操作 即 可 。 注 意 : 为 保证 购书 读者 的 权益 ， 该 操作 会 给 出 相关 提示 ， 要 求 输入 提取 
码 进 行 验证 。 

如 果 您 是 教师 ， 希 望 获得 教学 配套 资源 ， 请 在 社区 本 书页 面 中 直接 联系 本 书 的 责任 
编辑 。 


提交 勘误 


作者 和 编辑 尽 最 大 努力 来 确保 书 中 内 容 的 准确 性 ， 但 难免 会 存在 疏漏 。 欢 迎 您 将 发 现 
的 问题 反馈 给 我 们 ， 帮 助 我 们 提升 图 书 的 质量 。 

当 您 发 现 错误 时 ， 请 登录 异步 社区 ， 按 书 名 搜索 ， 进 入 本 书页 面 ， 单 击 “ 提 交 勘 误 ”， 输 
入 勘误 信息 ， 单 击 “ 提 交 ” 按 钮 即 可 。 本 书 的 作者 和 编辑 会 对 您 提交 的 勘误 进行 审核 ， 确 认 并 
接受 后 ， 您 将 获 赠 异步 社区 的 100 积分 。 积 分 可 用 于 在 异步 社区 兑换 优惠 券 、 样 书 或 奖品 。 
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与 我 们 联系 


我 们 的 联系 邮箱 是 contact@epubit.com.cn. 

如 果 您 对 本 书 有 任何 疑问 或 建议 ， 请 您 发 邮件 给 我 们 ， 并 请 在 邮件 标题 中 注 明 本 书 书 
名 ， 以 便 我 们 更 高 效 地 做 出 反馈 。 

如 果 您 有 兴趣 出 版 图 书 、 录 制 教学 视频 ， 或 者 参与 图 书 翻译 、 技 术 审 校 等 工作 ， 可 以 
发 邮件 给 我 们 ; 有 意 出 版 图 书 的 作者 也 可 以 到 异步 社区 在 线 提交 投稿 (直接 访问 
www.epubit.com/selfpublish/submission 即 可 )。 

如 果 您 是 学 校 、 培 训 机 构 或 企业 ， 想 批量 购买 本 书 或 异步 社区 出 版 的 其 他 图 书 ， 也 可 
以 发 邮件 给 我 们 。 

如 果 您 在 网 上 发 现 有 针对 异步 社区 出 品 图 书 的 各 种 形式 的 盗版 行为 ， 包 括 对 图 书 全 部 
或 部 分 内 容 的 非 授 权 传 播 ， 请 您 将 怀疑 有 侵权 行为 的 链接 发 邮件 给 我 们 。 您 的 这 一 举动 是 
对 作者 权益 的 保护 ， 也 是 我 们 持续 为 您 提供 有 价值 的 内 容 的 动力 之 源 。 





关于 异步 社区 和 异步 图 书 


“异步 社区 ”是 人 民 邮 电 出 版 社 旗下 IT 专业 图 书社 区 ， 致 力 于 出 版 精品 IT 技术 图 书 和 
相关 学 习 产 品 ， 为 作 译 者 提供 优质 出 版 服务 。 异 步 社 区 创办 于 2015 年 8 月 ， 提 供 大 量 精品 
IT 技术 图 书 和 电子 书 ， 以 及 高 品质 技术 文章 和 视频 课程 。 更 多 详情 请 访问 异步 社区 官网 
https://www.epubit.com. 

“异步 图 书 ” 是 由 异步 社区 编辑 团队 策划 出 版 的 精品 IT 专业 图 书 的 品牌 , 依托 于 人 民 邮 
电 出 版 社 近 30 年 的 计算 机 图 书 出 版 积累 和 专业 编辑 团队 ， 相 关 图 书 在 封面 上 印 有 异步 图 书 
的 LOGO。 异 步 图 书 的 出 版 领域 包括 软件 开发 、 大 数据 、AI、 测 试 、 前 端 ”、 网 络 技术 等 。 
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图 形 编程 是 计算 机 科学 中 最 具 挑战 性 的 主题 之 一 ， 并 因此 而 闻名 。 当 今 ， 图 形 编程 是 基 
于 着 色 器 的 一 一 也 就 是 说 ， 有 些 程序 是 用 诸如 C++ 或 Java 等 标准 编程 语言 编写 的 ， 并 运行 
在 CPU 上 ; 而 另 一 些 是 用 专用 的 着 色 器 语言 编写 的 ， 并 直接 运行 在 显卡 (GPU) 上。 着色 
器 编程 的 学 习 曲 线 很 陡峭 ， 以 致 哪怕 是 绘制 简单 的 东西 ， 也 需要 一 系列 错综复杂 的 步骤 ， 
把 图 形 数据 从 一 个 “管线 ”中 传递 下 去 才能 完成 。 现 代 显 卡 能 够 并 行 处 理 数 据 ， 即 使 是 绘 
制 简 单 的 形状 ， 图 形 程序 员 也 必须 理解 GPU 的 并 行 架 构 。 

虽然 这 并 不 简单 ， 但 回报 是 超 强 的 泻 染 能 力 。 电 子 游 戏 中 涌现 出 来 的 令 人 惊艳 的 虚拟 现 
实 和 好 莱 坞 电影 中 越 来 越 逼 真 的 特效 ， 很 大 程度 上 是 由 着 色 器 编程 的 进步 带 来 的 。 如 果 阅 
读本 书 是 你 进入 3D 图 形 世界 的 第 一 步 ， 那 么 你 正在 开始 接受 一 个 对 自己 的 挑战 。 挑 战 的 奖 
励 不 仅仅 是 漂亮 的 图 片 ， 还 有 过 往 不 敢 想象 的 对 机 器 的 掌控 程度 。 欢 迎 来 到 激动 人 心 的 计 
算 机 图 形 编程 世界 ! 


1.1 语言 和 库 


现代 图 形 编程 使 用 图 形 库 完成 ， 也 就 是 说 ， 程 序 员 编 写 代 码 时 ， 调 用 一 个 预先 定义 的 库 
(或 者 一 系列 库 ) 中 的 函数 ， 由 这 个 库 来 提供 对 底层 图 形 操作 的 支持 。 现 在 有 很 多 图 形 库 ， 
但 常见 的 平台 无 关 图 形 编程 库 叫 作 OpenGL (Open Graphics Library， 开 放 图 形 库 )。 本 书 将 
会 介绍 如 何在 C++ 中 使 用 OpenGL 进行 3D 图 形 编 程 。 

在 C++ 中 使 用 OpenGL 需要 配置 多 个 库 。 这 里 按照 个 人 需求 ,可 以 有 一 系列 令 人 眼花 练 
乱 的 选择 。 在 本 节 中 ， 我 们 会 介绍 哪 几 种 库 是 必要 的 ， 各 种 库 的 一 些 常见 选择 ， 以 及 我 们 
在 本 书 中 选择 的 库 。 

总 的 来 说 ， 你 需要 以 下 这 些 语言 和 库 : 

@ C++ 开发 环境 ; 

OpenGL / GLSL; 
窗口 管理 ; 
扩展 库 ; 
数学 库 ; 

@ 纹理 管理 。 

读者 可 能 需要 进行 几 个 准备 步骤 ， 以 保证 这 几 种 库 已 安装 在 系统 中 ， 并 可 以 正常 使 用 。 
下 面 几 个 小 节 将 简单 介绍 每 一 种 语言 和 库 。 安 装 和 配置 的 更 多 细节 请 参阅 附录 。 
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WLI CER 


C++ 是 一 种 通用 编程 语言 ， 最 早出 现在 20 世纪 80 年 代 中 期 。 它 的 设计 ， 以 及 它 通 常 被 
编译 成 本 机 的 机 器 码 这 一 事实 ,使 得 它 成 为 了 需要 高 性 能 的 系统 的 优秀 选择 ， 比 如 3D 图 形 
计算 。C++ 的 另 一 个 优点 是 OpenGL 调用 库 是 基于 C 语言 开发 的 。 

有 许多 可 用 的 C++ 开发 环境 。 在 阅读 本 书 时 ， 如 果 读 者 使 用 PC (Windows 操作 系统 )， 
我 们 推荐 使 用 Microsoft Visual Studio M 1， 如 果 在 苹果 计算 机 上 ， 我 们 推荐 Xcode S, 
附录 中 也 介绍 了 各 个 平台 下 的 安装 和 配置 。 


1.1.2 OpenGL /GLSL 


OpenGL 的 1.0 版 本 出 现在 1992 年 ， 是 一 种 对 供应 商 特定 的 计算 机 图 形 应 用 编程 接口 
CAPI) 的 < 开放 性 ”替代 。 

它 的 规范 和 开发 工作 由 当时 新 成 立 的 OpenGL 架构 评审 委员 会 (ARB) 管理 和 控制 。 
ARB 是 一 群 行业 参 与 者 组 成 的 小 组 .2006 年 , ARB OpenGL 规范 的 控制 权 交 给 了 Khronos 
Group。Khronos Group 是 一 个 非 营 利 性 联盟 ， 不 仅 管理 OpenGL 标准 ， 还 管理 很 多 其 他 的 
开放 性 行业 标准 。 

从 一 开始 ，OpenGL 就 定期 修订 和 扩展 。2004 年 ，2.0 版 本 中 引入 了 OpenGL 着 色 语 言 
(GLSL)， 使 得 “着 色 器 程序 ”可 以 在 图 形 管线 的 各 个 阶段 被 安装 和 直接 执行 。 

2009 年 ，3.1 版 本 中 移 除 了 大 量 被 弃 用 的 功能 ， 以 强制 使 用 着 色 器 编程 ， 而 不 是 之 前 的 
老 方 法 《 叫 作 “ 立 即 模式 ”)。" 在 最 近 的 功能 中 ，4.0 版 本 (2010 年 ) 在 可 编程 管线 中 增加 
了 一 个 细 分 阶段 。 

这 本 书 假定 用 户 的 机 器 有 一 个 支持 至 少 4.3 版 本 OpenGL 的 显卡 。 如 果 你 不 确定 你 的 
GPU 文 持 哪个 版 本 的 OpenGL， 网 上 有 免费 的 应 用 程序 可 以 用 来 找 出 答案 。 有 一 个 这 样 的 
应 用 程序 是 GLView， 由 “realtech VR” 公 司 提供 [GY19。 
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OpenGL 实际 上 并 不 是 把 图 像 直 接 绘制 到 计算 机 屏幕 上 ， 而 是 泻 染 到 一 个 帧 缓冲 区 ， 然 
后 需要 由 这 人 台 机 器 来 负责 把 帧 缓冲 区 的 内 容 绘制 到 屏幕 上 的 一 个 窗口 中 。 有 不 少 库 都 可 以 
支持 这 一 部 分 工作 。 一 个 选择 是 使 用 操作 系统 提供 的 窗口 管理 功能 ， 比 如 Microsoft 
Windows API. 但 这 通常 是 不 实用 的 ， 需 要 很 多 底层 的 编码 工作 。GLUT 库 曾 经 是 一 个 很 流 
行 的 选择 ， 但 现在 已 经 被 弃 用 了 。 它 的 一 个 现代 化 的 演变 是 freeglut 库 。 其 他 相关 的 选项 还 
有 CPW JE, GLOW 库 和 GLUI 库 。 

GLFW 是 最 流行 的 选择 之 一 ， 也 是 我 们 这 本 书 中 选择 使 用 的 。 它 内 置 了 对 Windows, 
macOS, Linux 和 其 他 操作 系统 [的 支持 。 它 可 以 在 其 官网 下 载 ， 并 且 必 须 在 要 使 用 它 的 
机 器 上 编译 。( 我 们 在 附录 中 介绍 了 相关 步骤 。) 


© 尽管 如 此 ， 许 多 显卡 厂商 (比如 NVIDIA) 依然 继续 支持 被 弃 用 的 功能 。 


1.1 语言 和 库 3 


1.1.4 扩展 库 


OpenGL 围绕 一 组 基本 功能 和 扩展 机 制 进行 组 织 。 随 着 技术 的 发 展 ， 扩 展 机 制 可 以 用 来 
文 持 新 的 功能 。 现 代 版 本 的 OpenGL， 比 如 我 们 在 本 书 中 使 用 的 4 以 上 版 本 ， 需 要 识别 GPU 
上 可 用 的 扩展 。OpenGL 核心 中 有 一 些 内 置 的 命令 用 来 支持 这 些 , 但 是 为 了 使 用 每 个 现代 命 
令 ， 需 要 执行 很 多 相当 复杂 的 代码 行 。 在 本 书 中 ， 我 们 会 持续 不 断 地 使 用 这 些 命令 。 所 以 
使 用 一 个 扩展 库 来 处 理 这 些 细节 已 经 成 了 标准 做 法 ， 这 样 能 让 程序 员 可 以 直接 使 用 现代 
OpenGL 命令 。 比 如 Glee, GLLoader 和 GLEW， 以 及 更 加 新 的 GL3W 和 GLAD. 

列 出 的 这 些 库 中 ， 常 用 的 是 GLEW， 意 思 是 OpenGL 扩展 牧马人 (OpenGL Extension 
Wrangler )。 它 支持 各 种 操作 系统 ， 包 括 Windows, Macintosh 和 Linux '"'), GLEW 不 是 一 
个 完美 的 选择 。 例 如 ， 它 需要 一 个 额外 的 DLL。 最近 ， 很 多 开发 者 选择 GL3W 或 者 GLAD。 
它们 的 优势 是 可 以 自动 更 新 ， 但 是 要 求 安装 Python。 因 为 这 些 原因 ， 在 本 书 中 我 们 选择 使 
用 GLEW。 它 可 以 在 官网 下 载 。 附 录 中 给 出 了 安装 和 配置 GLEW 的 完整 说 明 。 
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3D FAG Bin A A EAEH EAER KE, BCA AS SR E IAA ES AY R A 
库 或 者 类 包 ， 能 极 大 地 方便 OpenGL 的 使 用 。 第 常 和 OpenGL 一 起 使 用 的 两 个 这 样 的 库 是 
Eigen 和 vmath。 后 者 在 流行 的 OpenGL SuperBible BY 5 中 被 使 用 。 

可 能 最 流行 的 数学 库 ， 也 是 本 书 中 使 用 的 ， 是 OpenGL Mathematics， 一 般 称 作 GLM. 
它 是 一 个 只 有 头 文件 的 CHE, 兼容 Windows, macos 和 Linux M, GLM 命令 很 方便 地 
遵循 和 GLSL 相同 的 命名 惯例 ， 使 得 来 回 阅读 特定 应 用 程序 的 CH+ 和 GLSL 代码 时 更 容易 。 
GLM 可 以 在 官网 下 载 。 

GLM 提供 与 图 形 概念 相关 的 类 和 基本 数学 函数 ， 例 如 矢量 、 短 阵 和 四 元 数 。 它 还 包含 
各 种 工具 类 ， 用 于 创建 和 使 用 常见 的 3D 图 形 结构 ， 例 如 透视 和 视角 矩阵 。 它 最 早 在 2005 
年 发 布 ， 由 Christophe Riccio SM 维护 。 有 关 安 装 GLM 的 说 明 ， 请 参阅 附录 。 


1.1.6 ”纹理 管理 


从 第 5 章 开 始 ， 我 们 将 使 用 图 像 文件 来 向 我 们 图 形 场景 中 的 对 象 添加 “纹理 ”。 这 意味 
着 我 们 会 需要 频繁 加 载 这 些 图 像 文件 到 我 们 的 CH / OpenGL 代码 中 。 从 零 开 始 写 一 个 纹理 
图 像 加 载 器 是 可 能 的 。 但 是 ， 考 虑 到 各 种 各 样 的 图 像 文件 格式 ， 使 用 一 个 纹理 加 载 库 通常 
是 更 好 的 。 比 如 FreeImage、DevIL、OpenGL Image (GLD 和 Glraw。 人 简单 OpenGL 图 像 加 载 
# (Simple OpenGL Image Loader, SOIL) 可 能 是 最 常用 的 OpenGL 图 像 加 载 库 ， 尽 管 它 有 
点 过 时 了 。 

本 书 中 使 用 的 纹理 图 像 加 载 库 是 SOIL2 一 一 SOIL 的 一 个 更 新 的 分 叉 版 本 。 像 我 们 之 前 
选择 的 库 一 样 ，SOIL2 兼容 各 种 平台 EC。 附录 中 给 出 了 详细 的 安装 和 配置 说 明 。 


4 第 1 章 AN 


1.1.7 TEE 


读者 可 能 希望 利用 很 多 其 他 有 用 的 库 。 例 如 ， 在 本 书 中 ， 我 们 将 展示 如 何 从 零 开 始 实现 
一 个 简单 的 “OBJ” 模 型 加 载 器 。 然 而 ， 正 如 我 们 将 看 到 的 ， 它 没有 处 理 OBI 标准 中 可 用 
的 很 多 选项 。 有 一 些 更 复杂 的 现成 的 OBJ 加 载 器 可 供 选 择 ， 比 如 Assimp 和 tinyobjloader。 
在 我 们 的 例子 中 ， 我 们 会 只 用 在 本 书 中 介绍 和 实现 的 简单 模型 加 载 器 。 


1.2 安装 和 配置 


在 开发 本 书 的 C++ 版 本 时 , 我们 斗争 了 很 入 ， 想 要 找到 诸 括 用 来 运行 示例 程序 的 平台 特 
定 配置 信息 的 最 佳 方法 。 配 置 用 C++ 来 使 用 OpenGL 的 系统 ， 要 比 用 Java 配置 复杂 得 多 。 
Java 版 本 的 配置 只 需要 几 个 短 段落 就 可 以 描述 完毕 〈 正 如 在 本 书 Java 版 中 看 到 的 (S11)。 最 
终 ， 我 们 选择 把 安装 和 配置 信息 在 各 平台 特定 的 附录 中 分 别 描述 。 我 们 希望 这 能 为 每 个 读 
者 提供 一 个 相关 的 地 方 来 寻找 关于 他 /她 的 系统 的 特定 信息 ， 而 不 是 被 和 他 /她 无 关 的 其 他 平 
台 的 信息 干扰 。 在 这 个 版 本 中 ， 我们 在 附录 A 中 提供 了 Microsoft Windows 平台 的 详细 配置 
教程 ， 在 附录 B 中 提供 了 苹果 Macintosh 平台 的 详细 配置 教程 。 
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OpenGL 是 整合 软 硬 件 的 多 平台 2D 和 3D 图 形 API。 使 用 OpenGL 需要 显卡 (GPU) 支 


持 足 够 新 版 的 OpenGL (如 第 1 章 所 述 )。 


在 硬件 方面 ，OpenGL 提供 了 一 个 多 级 图 形 管线 ， 可 以 使 用 一 种 名 为 GLSL 的 语言 进行 


部 分 编程 。 


软件 方面 ，OpenGL 的 API 是 用 C 语言 编写 的 ， 因 此 API 调用 直接 兼容 C 和 C++。 对 
于 十 几 种 其 他 的 流行 语言 (ava, Perl, Python, Visual Basic. Delphi, Haskell, Lisp. Ruby 
T), OpenGL 也 有 着 稳 定 的 库 (或 “包装 器 ”)， 具 有 与 C 语言 库 几 乎 相同 的 性 能 。 本 书 使 
用 的 C++, 应 该 是 目前 流行 的 OpenGL 语言 。 使 用 C++ 时 , 程序 员 编 写 在 CPU 上 运行 的 ( 编 
译 后 的 ) 代码 并 包含 OpenGL 调用 。 当 一 个 C++ 程序 包含 OpenGL 调用 时 ， 我 们 将 其 称 为 
C++/OpenGL 应 用 程序 。C++/OpenGL 应 用 程序 的 一 个 重要 任务 是 将 程序 员 的 GLSL 代码 安 


装 到 GPU 上 。 

基于 C++ 的 图 形 应 用 大 致 如 图 2.1 
所 示 , 其 中 软件 部 分 以 底 色 突 出 显示 。 

在 我 们 后 面 的 代码 中 ， 一 部 分 用 
C++ 编码 ， 进 行 OpenGL 调用 ;， 另 一 
部 分 是 GLSL. C++/OpenGL 应 用 程 
序 、GLSL 模块 和 硬件 一 起 用 来 生成 
3D 图 形 输出 。 当 应 用 完成 之 后 ， 最 终 
用 户 直接 与 C++ 应 用 程序 进行 交互 。 

GLSL 是 一 种 着 色 器 语言 。 着 色 器 
语言 主要 运行 于 GPU E, 在 图 形 管线 
上 下 文中 。 还 有 一 些 其 他 的 着 色 器 语 
言 ， 如 HLSL， 用 于 微软 的 3D 框架 


最 终 用 户 


程序 员 


使 用 Ope 
的 C++ 应 用 程序 





= 安装 


运行 于 
GLSIL 着 色 器 代码 | " 


图 2.1 基于 C++ 的 图 形 应 用 概览 


DirectX. GLSL 是 与 OpenGL 兼容 的 专用 着 色 器 语言 ， 因 此 我 们 在 C+HOpenGL 应 用 代码 


之 外 ， 需 要 用 GLSL 写 着 色 器 代码 。 


本 章 其 余 内 容 将 简单 地 浏览 OpenGL 管线 的 内 容 。 读 者 不 用 期 望 详 细 理 解 所 有 细节 ， 这 


里 只 要 对 各 阶段 如 何 工作 有 大 致 感觉 即 可 。 


2.1 OpenGL 管线 


现代 3D 图 形 编程 会 使 用 管线 的 概念 , 在 管线 中 。 将 3D 场景 转换 成 2D 图 形 的 过 程 被 分 
割 成 许多 步骤 。OpenGL 和 DirectX 使 用 了 相似 的 管线 概念 。 
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图 2.2 展示 了 OpenGL 图 形 管线 简化 后 的 概览 〈 并 未 展示 所 有 阶段 ， 仅 包含 我 们 要 学 习 
的 主要 阶段 )。C+HOpenGL 应 用 发 送 图 形 数据 到 顶点 着 色 器 ， 随 着 管线 处 理 ， 最 终生 成 在 
显示 器 上 显示 的 像素 点 。 

用 灰色 阴影 表示 的 阶段 〈 顶 点 着 色 器 、 曲 面 细 分 着 色 器 、 几 何 着 色 器 、 片 段 着 色 器 ) 可 
以 用 GLSL 进行 编程 。 将 GLSL 程序 载 入 这 些 着 色 器 阶段 也 是 C++/OpenGL 程序 的 责任 之 
一 ， 其 过 程 如 下 。 

C1) 首先 使 用 C++ 获取 GLSL 着 色 器 代码 ， 既 可 以 从 文件 中 读 取 ， 也 可 以 硬 编 码 在 字 
符 串 中 。 

(2) 接 下 来 创建 OpenGL 着 色 器 对 象 并 将 GLSL 着 色 器 代码 加 载 进 着 色 器 对 象 。 

(3) 最 后 ， 用 OpenGL 命令 编译 并 连接 着 色 器 对 象 ， 并 将 它们 安装 进 GPU。 

在 实践 中 ， 一 般 至 少 要 提供 顶点 着 色 器 和 片段 着 色 器 阶段 的 GLSL 代码 ， 而 曲面 细 分 着 
色 器 和 几何 着 色 器 阶段 是 可 选 的 。 接 下 来 我 们 将 简单 地 过 一 下 整个 过 程 ， 并 看 看 每 步 发 生 
了 了 什么， 


从 C++ 应 用 程序 


| 


隐藏 面 消除 等 
图 2.2 OpenGL 管线 概览 





2.1.1 C++/OpenGL 应 用 程序 


我 们 的 图 形 应 用 程序 中 大 部 分 是 使 用 C++ 进行 编写 的 。 根 据 程序 目的 的 不 同 ， 它 可 能 需 
要 用 标准 C++ 库 与 最 终 用 户 交 互 ， 用 OpenGL 调用 实现 与 3D 泻 染 相关 的 任务 。 正 如 前 面 章 
节 所 述 ， 我 们 将 会 使 用 一 些 扩 展 库 : GLEW (OpenGL Extension Wrangler), GLM (OpenGL 
Mathmatics ). SOIL2 (Simple OpenGL Image Loader) 以 及 GLFW (Graphics Library Framework )。 

GLFW 库 包含 了 GLFWwindow 类 ,我 们 可 以 在 其 上 进行 3D 场 景 绘制 .如 前 所 述 , OpenGL 
也 向 我 们 提供 了 用 于 将 GLSL 程序 安装 到 可 编程 着 色 器 阶段 并 编译 的 命令 。 最 后 ，OpenGL 
使 用 缓冲 区 将 3D 模型 和 其 他 相关 图 形 数据 发 送 到 管线 中 。 

在 我 们 尝试 编写 着 色 器 之 前 ， 先 写 一 个 简单 的 C+HOpenGL 程序 ， 创 建 一 个 
GLFWwindow 实例 并 为 其 设置 背景 色 。 这 个 过 程 根本 用 不 到 着 色 器 ! 其 代码 如 程序 2.1 所 
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示 。 程序 2.1 中 的 main() 函 数 与 本 书 中 所 有 将 会 用 到 的 main() 函 数 一 样 。 其 中 重要 的 操作 有 : 
(a) 初始 化 GLFW FFE; Cb) 实例 化 GLFWwindow; Ce) 初始 化 GLEW E; (d) 调用 一 次 init() 
函数 ;(e) 重复 调用 display) K žk. 

我 们 将 每 个 应 用 程序 的 初始 化 任务 都 放 在 init0) 函 数 中 ， 用 于 绘制 GLFWwindow 的 代码 
都 将 放 在 display0 函 数 中 。 

在 本 例 中 ，glClearColor0) 命 令 指定 了 清除 背景 时 用 的 颜色 值 一 一 这 里 (1,0,0,1) 代 表 RGB 
值 中 的 红色 (末尾 的 1 表示 不 透明 度 )。 接 下 来 使 用 OpenGL 调用 glClear(GL_COLOR_ 
BUFFER_BIT)， 实 际 使 用 红色 对 颜色 缓冲 区 进行 填充 。 


程序 2.1 第 一 个 C++/OpenGL 应 用 程序 


#include <GL\glew.h> 
#include <GLFW\glfw3.h> 
#include <iostream> 


using namespace std; 
void init (GLFWwindow* window) { } 


void display (GLFWwindow* window, double currentTime) { 
glClearColor(1.0, 0.0, 0.0, 1.0); 
glClear (GL COLOR BUFFER BIT) ; 

} 


int main(void) { 
if (!glfwInit()) { exit(EXIT_ FAILURE); } 
glfwWindowHint (GLFW CONTEXT VERSION MAJOR, 4); 
glfwWindowHint (GLFW_CONTEXT VERSION MINOR, 3); 
GLFWwindow* window = glfwCreateWindow(600, 600, "Chapter2 - programl", NULL, NULL); 
glfwMakeContextCurrent (window) ; 
if (glewInit() != GLEW_OK) { exit(EXIT_FAILURE); } 
glfwSwapInterval (1); 


init (window) ; 


while (!glfwWindowShouldClose(window)) { 
display(window, glfwGetTime()); 
glfwSwapBuffers (window) ; 
glfwPollEvents(); 

} 


glfwDestroyWindow (window) ; 
glfwTerminate(); 
exit (EXIT SUCCESS) ; 

} 


图 2.3 展示 了 程序 2.1 的 输出 。 

这 些 函数 部 署 的 机 制 如 下 :GLFW 和 GLEW 库 先 分 别 使 用 glfwImit0 和 glewInit() 初 始 化 。 
glfwCreateWindow() 命 令 负 责 创建 GLFW 窗口 ， 同 时 其 相关 的 OpenGL 上 下 文 "由 
glfwCreateWindow0 命 令 创 建 ， 其 可 选项 由 前 面 的 WindowHints 设置 。WindowHints 指定 了 
机 器 必须 与 OpenGL 版 本 4.3 兼容 〈“ 主 版 本 号 ”=4,“ 次 版 本 号 ”=3 )。glfwCreateWindow 


© “上 下 文 ”是 指 OpenGL 实例 及 其 状态 信息 ， 其 中 包括 诸如 颜色 缓冲 区 之 类 的 项 。 
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命令 的 参数 指定 了 窗口 的 宽 、 高 〈 以 像素 为 单位 ) 以 及 窗口 顶部 的 标题 。( 这 里 没有 用 到 的 
另外 两 个 参数 设 为 NULL， 分 别 用 来 允许 全 屏 显 示 以 及 资源 共享 。) glfwSwapInterval(0 命 令 
和 glfwSwapBuffers 命令 用 来 开启 垂直 同步 (Vsync) 一 一 GLFW 窗口 默认 是 双 缓 冲 的 。 "这 
里 需要 注意 ， 创 建 GLFW 窗口 并 不 会 自动 将 它 与 当前 OpenGL 上 下 文 关联 起 来 一 一 因此 我 
们 需要 调用 glfwMakeContextCurrent(). 














|| Chapter 2 - program 1 





图 2.3 程序 2. ] 的 输出 


main(0) 函 数 包 括 了 一 个 简单 的 泻 染 循环 ， 用 来 反复 调用 display() 方 法 。 同 时 它 也 调用 了 
glfwSwapBuffers() 以 绘制 屏幕 ， 以 及 glfwPollEvents() 以 处 理 窗 口 相关 事件 (如 按键 事件 )。 
当 GLFW 探测 到 应 该 关闭 窗口 的 事件 (如 用 户 单 击 了 右上 角 的 xX) 时， 循环 就 会 终止 。 这 
里 需要 注意 ， 我 们 将 一 份 GLFW 窗口 对 象 的 引用 传 入 了 init0) 和 displayO) 调 用 。 这 些 函数 在 
特定 环境 下 需要 访问 GLFW 窗口 对 象 。 同 时 我 们 也 将 当前 时 间 传 入 了 display0 调 用 ， 这 样 
方便 保证 动画 在 不 同 计算 机 上 以 相同 速度 播放 。 在 这 里 ， 我 们 用 了 glfwGetTime()， 它 会 
回 GLFW 初始 化 之 后 经 过 的 时 间 。 

现在 是 时 候 详 细 看 看 程序 2.1 中 的 OpenGL 调用 了 。 首 先 关 注 一 下 这 个 调用 : 


glClear (GL COLOR BUFFER BIT); 
在 这 里 ， 调 用 的 OpenGL 参考 文档 中 的 描述 是 : 
void glClear(GLbitfield mask) ; 


参数 中 引用 了 类 型 为 GLbitfield 的 “GL COLOR BUFFER BIT”. OpenGL 有 很 多 预定 
义 的 常量 (其 中 很 多 是 枚 举 量 )。GL COLOR BUFFER BIT 引用 了 包含 演 染 后 像素 的 颜色 
缓冲 区 。OpenGL 有 多 个 颜色 缓冲 区 ， 这 个 命令 会 将 它们 全 部 清除 一 一 用 一 种 被 称 为 “清除 
色 (clear color)” 的 预定 义 颜 色 填 充 所 有 缓冲 区 。 注 意 ， 这 里 的 “清除 (clear)” 表 示 的 不 
是 “颜色 清晰 ”， 而 是 用 来 重 置 缓冲 区 时 填充 的 颜色 〈 清 除 )。 

在 调用 glClear() 后 紧 接着 是 glClearColorO 的 调用 。glClearColor0O 让 我 们 能 够 指定 颜色 组 
冲 区 清除 后 填充 的 值 。 这 里 我 们 指定 了 (1,0,0,1)， 即 RGBA 颜色 中 的 红色 。 


O “ 双 缓 冲 ” 意 味 着 有 两 个 颜色 缓冲 区 一 一 个 显示 ， 一 个 浑 染 。 泻 染 整 个 帧 后 ， 将 交换 缓冲 区 。 缓 冲 用 于 减少 不 良 的 视 
觉 伪 影 。 
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最 后 ， 当 用 户 尝试 关闭 GLFW 窗口 时 ， 程 序 将 退出 泻 染 循环 。 这 时 ，main() 会 通过 分 别 
调用 glfwDestroyWindow0 和 glfwTerminate() 通 知 GLFW 销毁 窗口 以 及 终止 运行 。 


21.2 ”顶点 着 色 器 和 片段 着 色 器 


在 第 一 个 OpenGL 程序 中 ,我 们 实际 上 并 没有 绘制 任何 东西 一 一 仅仅 用 一 种 颜色 来 填充 
了 颜色 缓冲 区 。 要 真 的 绘制 点 什么 ， 我 们 需要 加 入 顶点 着 色 器 和 片段 着 色 器 。 

你 可 能 对 于 学 习 OpenGL 只 让 你 绘制 少数 几 类 非常 简单 的 东西 有 点 吃惊 ， 如 点 、 线 、 三 
角形 。 这 些 简单 的 东西 叫 作 图 元 ， 多 数 3D 模型 通常 是 由 许多 三 角形 的 图 元 构成 。 图 元 由 顶 
点 组 成 一 一 例如 三 角形 有 3 个 顶点 。 顶 点 可 以 由 很 多 来 源 产生 一 一 从 文件 读 取 并 由 C++/ 
OpenGL 应 用 载 入 缓冲 区 、 直 接 在 C+ 文件 中 硬 编码 或 者 直接 在 GLSL 代码 中 。 

在 加 载 顶点 之 前 ，C++HOpenGL 应 用 必须 编译 并 链接 合适 的 GLSL 顶点 着 色 器 和 片段 着 
色 器 程序 ， 之 后 将 它们 载 入 管线 。 我 们 稍 后 将 会 看 到 这 些 命令 。 

C+HOpenGL 应 用 同时 也 负责 通知 OpenGL 构建 三 角形 ,通过 使 用 如 下 OpenGL 函数 完成 : 


glDrawArrays (GLenum mode, Glint first, GLsizei count); 


mode 参数 是 图 元 的 类 型 一 一 对 于 三 角形 我 们 用 GL_TRIANGLES 。first 参数 表示 从 哪个 
顶点 开始 绘制 (通常 是 顶点 0， 即 第 一 个 顶点 )，count 表示 总 共 要 绘制 的 顶点 数 。 

当 调 用 glIDrawArrays0 时 , 管线 中 的 GLSL 代码 开始 执行 。 现 在 可 以 向 管线 加 一 些 GLSL 
代码 了 。 

不 管 它们 从 何 处 读 入 , 所 有 的 顶点 都 会 被 传 入 顶点 着 色 器 。 顶点 们 会 被 一 个 一 个 地 处 理 ， 
即 着 色 器 会 对 每 个 顶点 执行 一 次 。 对 拥有 很 多 顶点 的 大 型 复杂 模型 而 言 ， 顶 点 着 色 器 会 执 
行 成 百 上 千 甚 至 百 万 次 ， 这 些 执行 过 程 通常 是 并 行 的 。 

现在 ， 我 们 来 写 一 个 简单 的 程序 ， 它 仅 包 含 一 个 顶点 ， 硬 编码 于 顶点 着 色 器 中 。 虽 然 这 
不 足以 让 我 们 画 三 角形 ， 但 是 足够 画 出 一 个 点 。 为 了 显示 这 个 点 ， 我 们 还 需要 提供 片段 着 
色 器 。 为 简单 起 见 ， 我 们 将 这 两 个 着 色 器 程序 声明 为 字符 串 数 组 。 


程序 2.2 ”着 色 器 ， 画 一 个 点 


(#include 列表 与 之 前 相同 ) 
#define numVAOs 1 

| | 新 的 定义 
GLuint renderingProgram; 
GLuint vao[numVAOs]; 


GLuint createShaderProgram() { 
const char *vshaderSource = 
"#version 430 \n" 
"void main(void) \n" 
"{ gl_Position = vec4(0.0, 0.0, 0.0, 1.0); }"; 


const char *fshaderSource = 
"#version 430 \n" 
"out vec4 color; \n" 
"void main(void) \n" 
"{ color = vec4(0.0, 0.0, 1.0, 1.0); }"% 
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Q 


Luint vShader = glCreateShader (GL VERTEX SHADER) ; 
Luint fShader = glCreateShader (GL FRAGMENT SHADER) ; 


Q 


lShaderSource (vShader, 1, &vshaderSource, NULL); 


9 
glShaderSource(fShader, 1, &fshaderSource, NULL); 
glCompileShader (vShader) ; 

glCompileShader (fShader) ; 

GLuint vfProgram = glCreateProgram() ; 
glAttachShader(vfProgram, vShader) ; 
glAttachShader(vfProgram, fShader) ; 
glLinkProgram(vfProgram) ; 





return vfProgram; 


} 


void init (GLFWwindow* window) { 
renderingProgram = createShaderProgram() ; 
glGenVertexArrays(numVAOs, vao); 
glBindVertexArray (vao[0]); 

} 


void display (GLFWwindow* window, double currentTime) { 
glUseProgram(renderingProgram) ; 
glDrawArrays(GL POINTS, 0, 1); 

} 


..-main() 函数 与 之 前 相同 


程序 看 起 来 只 显示 了 一 个 空 的 窗口 ( 见 图 2.4)。 但 仔细 观察 一 下 ， 会 发 现 窗口 中 央 有 一 
个 蓝 色 的 点 (假设 本 页 印刷 精度 足够 )。OpenGL 中 点 的 默认 大 小 为 1 像素 。 
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图 2.4 程序 2.2 的 输出 效果 


程序 2.2 中 有 很 多 值得 讨论 的 重要 细节 (为 方便 起 见 已 用 颜色 标 出 )。 首 先 , 注意 其 中 多 
次 用 到 的 “Gluint” 一 一 这 是 由 OpenGL 提供 的 “unsigned int” 的 平台 无 关 简写 (许多 OpenGL 
结构 体 都 是 整数 类 型 引用 )。 接 下 来 ，init0) 不 再 是 空 函 数 了 一 一 现在 它 会 调用 另 一 个 叫 作 
“createShaderProgram” 的 函数 (我 们 写 的 )。“createShaderProgram” 了 函数 先 定 义 了 两 个 字符 
串 vshaderSource 和 fshaderSource。 之 后 调用 了 两 次 glCreateShader() 函 数 ， 创 建 了 类 型 为 
GL VERTEX SHADER 和 GL FRAGMENT SHADER 的 两 个 着 色 器 。 OpenGL 创建 每 个 着 
色 器 对 象 〈 初 始 值 为 空 ) 的 时 候 ， 会 返回 一 个 整数 ID 作为 后 面 引用 它 的 序号 一 一 我 们 的 代 
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码 将 这 个 ID 存 入 了 vShader 和 fShader 变量 中 。 之 后 ，createShaderProgram() 调 用 了 
glShaderSource()， 这 个 函数 用 于 将 GLSL 代码 从 字符 串 载 入 空 着 色 器 对 象 中 。 之 后 ， 用 
glCompileShader0) 编 译 各 着 色 器 。glShaderSource0 有 4 个 参数 : (a) 用 来 存放 着 色 器 的 着 色 
器 对 象 ，(b) 着 色 器 源 代 码 中 的 字符 串 数 量 ，(c) 包含 源 代码 的 字符 串 指 针 ，(d) 最 后 一 个 
没 用 到 的 参数 (我 们 稍 后 会 在 补充 章节 说 明 中 解释 这 个 参数 )。 注 意 ， 这 两 次 调用 
glCompileShader() 时 都 指明 了 着 色 器 的 源 代码 字符 串 数量 为 “1” 一 一 这 个 参数 也 会 在 补充 
说 明 中 解释 。 

之 后 应 用 程序 创建 了 一 个 叫 作 vfProgram 的 程序 对 象 , 并 储存 指向 它 的 整数 ID。OpenGL 
“程序 ”对 象 包含 一 系列 编译 过 的 着 色 器 ， 这 里 可 以 看 到 使 用 glCreateProgram() 创 建 程序 对 
象 ， 使 用 glAttachShader() 将 着 色 器 加 入 程序 对 象 ， 之 后 使 用 glLinkProgram() 来 请 求 GLSL 
编译 器 确保 它们 的 兼容 性 。 

如 前 所 见 ， 在 init0 结 束 后 程序 调用 了 display()。display0 函 数 所 做 的 事情 中 包含 调 
glUseProgram()， 它 将 含有 两 个 已 编译 着 色 器 的 程序 载 入 OpenGL 管线 阶段 (在 GPU 上 !)。 
注意 glUseProgram() 并 没有 运行 着 色 器 ， 它 只 是 将 着 色 器 加 载 进 硬 件 。 

我 们 稍 后 在 第 4 章 会 看 到 ,一般 情况 下 ,这 里 C++H/OpenGL 将 会 准备 要 发 送 给 管线 绘制 
的 模型 的 顶点 集 。 但 是 本 例 中 ， 由 于 是 第 一 个 着 色 器 程序 ， 我 们 仅仅 在 顶点 着 色 器 中 硬 编 
码 了 一 个 顶点。 因此 ， 本 例 中 的 displayO 函 数 接着 调用 了 glDrawArraysO 用 来 启动 管线 处 理 
过 程 。 原 始 类 型 是 GL_ POINTS， 仅 用 来 显示 一 个 点 。 

现在 我 们 来 看 一 下 着 色 器 ， 在 之 前 用 绿色 展示 “〈 并 在 之 后 的 解释 中 又 重复 了 一 遍 )。 正 
如 我 们 所 看 到 的 ， 在 C++/OpenGL 程序 中 ， 它 们 声明 为 字符 串 数 组 。 这 是 一 种 笨拙 的 编程 
方式 ， 不 过 在 这 个 超 简单 的 例子 中 足够 了 。 这 个 顶点 着 色 器 是 : 

#version 430 


void main(void) 
{ gl Position = vec4(0.0, 0.0, 0.0, 1.0); } 


第 一 行 指 明了 OpenGL 版 本 ， 这 里 是 4.3。 接 下 来 是 一 个 “main” 函 数 (我 们 后 面 将 会 
看 到 ，GLSL 句法 上 与 C++ 类 似 )。 所 有 顶点 着 色 器 的 主要 目标 都 是 将 顶点 发 送 给 管线 〈 正 
如 之 前 所 说 的 ， 它 会 对 每 个 顶点 进行 处 理 )。 内 置 变量 g]_ Position 用 来 设置 顶点 在 3D 空间 
的 坐标 位 置 ， 并 发 送 至 下 一 个 管线 阶段 。GLSL 数据 类 型 vec4 用 来 存储 4 元 组 ， 适 合用 来 
存储 坐标 ，4 元 组 的 前 3 个 值 分 别 表 示 AX Y Z， 第 4 个 值 在 这 里 设 为 1.0〈 第 3 章 将 会 学 
习 第 4 个 值 的 用 途 )。 本 例 中 ， 顶 点 坐标 硬 编码 于 原点 (0,0,0)。 

顶点 接 下 来 将 沿 着 管线 移动 到 光栅 着 色 器 ， 它 们 会 在 这 里 被 转换 成 像素 位 置 (更 精确 地 
说 是 片段 一 一 后 面 会 解释 )。 最 终 这 些 像素 (片段 到 达 片 段 着 色 器 : 

#version 430 

out vec4 color; 


void main (void) 
{ color = vec4(0.0, 0.0, 1.0, 1.0); } 


所 有 片段 着 色 器 的 目的 都 是 给 将 要 展示 的 像素 赋予 RGB 颜色 。 在 本 例 中 所 指定 的 输出 
颜色 值 (0,0,1) 是 蓝 色 (第 4 个 值 1.0 是 不 透明 度 )。 注 意 这 里 的 “out” 标 签 表 明 color 变量 是 
输出 变量 。( 在 顶点 着 色 器 中 并 不 是 必须 给 gl Position 指定 “out” 标 签 ， 因 为 gl Position 
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是 预定 义 的 输出 变量 。) 

代码 中 还 有 一 处 我 们 没有 讨论 的 细节 ， 即 initO 函 数 中 的 最 后 两 行 CEA Ao 它们 
看 起 来 可 能 有 些 神秘 。 我 们 在 第 4 章 中 将 会 看 到 ， 当 准 备 将 数据 集 发 送 给 管线 时 是 以 缓冲 
区 形式 发 送 的 。 这 些 缓冲 区 最 后 都 会 被 存 入 顶点 数组 对 象 (Vertex Array Object, VAO) 中 。 
在 本 例 中 ， 我 们 ai 了 一 个 点 ， 因 此 我 们 不 需要 任何 缓冲 区 。 但 是 ， 即 
使 应 用 程序 完全 没有 用 到 任何 缓冲 区 , OpenGL 仍然 需要 在 使 用 着 色 器 的 时 候 至 少 有 一 个 创 
建 好 的 VAO， F 以 这 两 行 用 来 创建 OpenGL 要 求 的 VAO. 


ee 
图 2.2 中 ， 在 顶点 处 理 和 像素 处 理 中 间 存 在 着 光栅 化 阶段 。1 是 在 这 文 个 阶段 中 图 元 (如 点 或 


角形 ) 转换 成 了 像素 集合 。OpenGL 中 默认 点 的 大 小 为 1 5 素 ， 这 就 是 为 什么 我 们 的 单 点 
最 终 演 染 成 了 单个 像素 。 
让 我 们 将 下 面 的 命令 加 入 display0) 函 数 中 ， 就 放 在 调用 glDrawArrays() 之 前 : 


glPointSize(30.0f); 


现在 ， 当 光栅 化 阶段 从 顶点 着 色 器 收 到 项 点 时 ， 为 一 个 大 小 是 30 像素 的 点 设置 像 
素颜 色 值 。 输 出 的 结果 展示 在 图 2.5 中 ( 见 彩 插 )。 
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图 2.5 改变 glPointSize 
让 我 们 继续 观察 剩 下 的 OpenGL 管线 。 
2.1.3 曲面 细 分 着 色 器 


我 们 在 第 12 章 中 介绍 曲面 细 分 。 可 编程 曲面 细 分 阶段 是 最 近 加 入 OpenGL (在 4.0 版 中 ) 
的 功能 。 它 提供 了 Ath i ba 着 色 器 用 以 生成 大 量 三 角形 ， 通 常 是 网 格 形式 。 同 时 也 提 
供 一 些 可 以 以 各 种 方式 操作 这 些 三 角形 的 工具 。 例 如 ， 程 序 员 可 能 需要 以 图 2.6 展示 的 方式 
操作 一 个 曲面 细 分 过 的 三 角形 网 格 。 

当 在 简单 形状 上 需要 很 多 顶点 时 ， 曲 面 细 分 着 色 器 就 能 发 挥 作用 了 ， 如 在 方形 区 域 或 曲 
面 上 。 稍 后 我 们 会 看 到 ， 它 在 生成 复杂 地 形 时 也 很 有 用 。 对 于 这 种 情况 ， 有 时 用 GPU 中 的 
曲面 细 分 着 色 器 在 硬件 里 生成 三 角形 网 格 比 在 C++ 中 生成 要 高 效 得 多 
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图 2.6 曲面 细 分 着 色 器 生成 的 网 格 


2.1.4 ”几何 着 色 器 


我 们 在 第 13 章 中 介绍 了 几何 着 色 器 阶段 。 顶 点 着 色 器 赋予 程序 员 一 次 操作 一 个 顶点 的 
能 力 〈“ 按 顶点 ”处 理 )， 片 段 着 色 器 〈 稍 后 会 看 到 ) 允许 一 次 操作 一 个 像素 〈“ 按 片段 ”处 
理 )， 几 何 着 色 器 赋予 了 一 次 操作 一 个 图 元 的 能 力 〈“ 按 图 元 ”处 理 )。 

回顾 前 文 提 到 最 通用 的 图 元 是 三 角形 。 当 我 们 到 达 几 何 着 色 器 阶段 时 ， 管 线 肯定 已 经 完 
成 了 将 顶点 组 合 为 三 角形 的 过 程 〈 这 个 过 程 叫 作 图 元 组 装 )。 接 下 来 几何 着 色 器 会 让 程序 员 
可 以 同时 访问 每 个 三 角形 的 所 有 顶点 。 

按 图 元 处 理 有 很 多 用 途 , 既 可 以 让 图 元 变形 ， 比 如 拉 伸 或 者 缩小 , 还 可 以 删除 一 些 图 元 ， 
从 而 在 泻 染 的 物体 上 产生 “ 洞 ” 一 一 这 是 一 种 将 简单 模型 转化 为 复杂 模型 的 方法 。 

几何 着 色 器 也 提供 了 生成 额外 图 元 的 方法 。 ariaya 开 了 通过 转换 简单 模型 而 得 到 
复杂 模型 的 大 门 。 几 何 着 色 器 有 一 种 有 趣 的 用 法 ， 就 是 在 物体 上 增加 表面 纹理 ， 如 凸 起 、 
wR “BR”. 考虑 图 2.7 所 示 的 简单 环 面 (本 书 后 面 会 介 绍 如 何 生 成 它 )。 环 面 的 表面 由 
上 百 个 三 角形 构成 。 如 果 我 们 用 几何 着 色 器 对 每 个 三 角形 外 面 增加 一 个 额外 的 三 角形 ， 就 
会 得 到 如 图 2.8 所 示 的 结果 。 这 个 “ 鳞 环 面 ” 如 果 是 从 C++H/OpenGL 应 用 程序 那 边 从 零 建 模 
生成 二 代价 就 大 了 。 





图 2.7 环 面 模型 图 2.8 几何 着 色 器 修改 后 的 环 面 
在 曲面 细 分 阶段 已 经 给 程序 员 同 时 访问 模型 中 所 有 顶点 的 能 力 后 , 再 提供 一 个 按 图 元 运 


算 的 着 色 器 阶段 可 能 看 起 来 有 点 多 余 。 它 们 的 区 别 是 ， 曲 面 细 分 只 在 非常 少数 情况 下 提供 
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了 这 个 能 力 一 一 尤其 在 模型 是 由 曲面 细 分 器 生成 的 三 角形 网 格 时 。 它 并 没有 提供 同时 访问 所 
有 顶点 ， 即 任何 从 C++ 用 缓冲 区 传 来 的 项 点 的 能 
2.1.5 光栅 化 


最 终 ， 我 们 3D 世界 中 的 点 、 三 角形 、 颜 色 等 全 都 需要 展现 在 一 个 2D 显示 器 上 。 这 个 
2D 屏幕 由 光栅 一 一 和 矩形 像素 阵列 组 成 。 

当 3D 物体 光栅 化 后 ，OpenGL 将 物体 中 的 图 元 (通常 是 三 角形 〉 转化 为 片段 。 片 段 拥 
有 关于 像素 的 信息 。 光 栅 化 过 程 确定 了 用 以 显示 3 个 顶点 所 确定 的 三 角形 的 所 有 像素 需要 


绘制 的 位 置 。 
光栅 化 过 程 开始 时 先 对 三 角形 的 每 对 顶点 进行 插值 。 插 值 过 程 可 以 通过 选项 调节 。 就 目 


前 而 言 ， 使 用 图 2.9 所 示 的 简单 的 线性 插值 就 够 了 。 原 本 的 3 个 顶点 标记 为 红色 ( 见 彩 插 )。 
如 果 光 栅 化 过 程 到 此 为 止 ， 那么 呈现 出 的 图 像 将 会 是 线 框 模型 。 呈 现 线 框 模型 也 是 
OpenGL 中 的 一 个 选项 。 通 过 在 display0 函 数 中 glDrawArrays0O 调 用 之 前 添加 如 下 命令 : 


glPolygonMode (GL_FRONT_AND BACK, GL_LINE) ; 


如 果 2.1.4 小 节 中 的 环 面 使 用 了 这 行 额外 代码 ， 它 将 会 看 起 来 如 图 2.10 所 示 。 





图 2.9 光栅 化 (步骤 1) 图 2.10 使 用 线 框 模型 泻 染 的 环 面 


如 果 我 们 不 加 入 之 前 的 那 一 行 代码 或 者 我 们 在 其 中 使 用 GL_FILL 而 非 GL_LINE), 
插值 过 程 将 会 继续 沿 着 光栅 线 填充 三 角形 的 内 部 ， 如 图 2.11 所 示 。 当 应 用 于 环 面 时 会 产生 
一 个 完全 光栅 化 的 “实心 ” 环 面 ， 如 图 2.12 CAE) 所 示 。 请 注意 ， 在 这 种 情况 下 ， 环 面 的 
整体 形状 和 曲率 不 明显 一 一 这 是 因为 我 们 没有 包括 任何 纹理 或 照明 技术 ， 因 此 它 看 起 来 是 
“ 平 ” 的 。 图 2.12〈 右 ) 是 同样 的 “ 平 ” 环 面 辣 加 了 线 框 模型 。 前 面 图 2.7 所 示 的 环 面 包括 
了 照明 效果 ， 因 此 更 清晰 地 显示 了 环 面 的 形状 。 我 们 将 在 第 7 章 学 习 照 明 。 

在 本 章 后 面 我 们 将 看 到 ， 光 栅 化 不 仅 可 以 对 像素 插值 。 任 何 顶 点 着 色 器 输出 的 变量 和 片 
段 者 色 器 的 输入 变量 都 可 以 基于 对 应 的 像素 进行 插值 。 我 们 将 会 使 用 该 功能 生成 平滑 的 颜 
色 渐 变 ， 实 现 真实 光照 以 及 许多 其 他 效果 。 
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图 2.11 完全 光栅 化 的 三 角形 





图 2.12 ” 环 面 的 完全 光栅 化 图 元 泻 染 E) AEE CE) 


2.1.6 Ha Bat 


如 前 所 述 ， 片 段 着 色 器 用 于 为 光栅 化 的 像素 指定 颜色 。 我 们 已 经 在 程序 2.2 中 看 到 了 
片段 着 色 器 示例 。 在 程序 2.2 中 ， 片 段 着 色 器 仅 将 输出 硬 编 码 为 特定 值 ， 从 而 为 每 个 输出 


的 像素 赋予 相同 的 颜色 。 不 过 GLSL 为 我 们 提供 了 其 他 计算 颜色 的 方式 ， 用 以 表现 无 穷 的 
创造 力 。 


一 个 简单 的 例子 就 是 基于 像素 位 置 决定 输出 颜色 。 回 忆 我 们 在 顶点 着 色 器 中 ， 顶 点 的 输 
出 坐标 使 用 了 预定 义 变量 gl Position。 在 片段 着 色 器 中 ， 同 样 有 一 个 变量 让 程序 员 可 以 访问 
输入 片段 的 坐标 ， 叫 作 gl FragCoord。 我 们 可 以 通过 修改 程序 2.2 中 的 片段 着 色 器 ， 让 它 使 
用 gl FragCoord (在 本 例 中 通过 GLSL 属性 选择 语法 引用 它 的 对 坐标 ) 基于 位 置 设 置 每 个 像 
素 的 颜色 ， 如 : 

#version 430 

out vec4 color; 

void main(void) 


{ if (gl_FragCoord.x < 200) color = vec4(1.0, 0.0, 0.0, 1.0); else color = vec4(0.0, 0.0, 1.0, 1.0); 
} 
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如 果 我 们 像 在 2.1.2 小 节 末 尾 那 样 增 大 GL PointSize， 泻 染 的 点 的 像素 颜色 将 会 以 坐标 
变化 一 一 X 坐标 小 于 200 时 是 红色 ， 否 则 就 是 蓝 色 ， 如 图 2.13 所 示 ( 见 彩 插 )。 
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图 2.13 ”片段 着 色 器 颜色 变化 


2.1.7 ”像素 操作 


当 我 们 在 display0 方 法 中 使 用 glIDrawArrays() 命 令 绘 制 场景 中 的 物体 时 ， 我 们 通常 期 望 
前 面 的 物体 挡住 后 面 的 物体 。 这 也 可 以 推广 到 物体 自身 ， 我 们 通常 期 望 看 到 物体 的 正面 对 
着 我 们 ， 而 不 是 背 对 我 们 。 

为 了 实现 这 个 效果 ， 我 们 需要 隐藏 面 消除 (Hidden Surface Removal，HSR )。 基 于 场景 
需要 的 不 同 效 果 ，OpenGL 可 以 进行 一 系列 不 同 的 HSR 操作 。 虽 然 这 个 阶段 不 可 编程 ， 但 
是 理解 它 的 工作 原理 是 非常 重要 的 。 我 们 不 仅 需要 正确 地 配置 它 ， befell 全 场景 添 
加 阴影 时 对 它 进行 进一步 操作 。 

OpenGL 通过 精巧 地 协调 两 个 缓冲 区 完成 隐藏 面 消除 : 颜色 缓冲 区 我们 之 前 讨论 过 ) 
和 深度 缓冲 区 〈 也 叫 作 过 缓冲 、Z-buffer)。 这 两 个 缓冲 区 都 和 光栅 的 大 小 相同 一 一 即 对 于 屏 
幕 上 每 个 像素 ， 在 两 个 缓冲 区 都 各 有 一 个 对 应 条 目 。 

当 绘 制 场景 中 的 各 种 对 象 时 ， 片 段 着 色 器 会 生成 像素 颜色 。 像 素颜 色 会 存放 在 颜色 缓冲 
区 中 一 一 颜色 绥 冲 区 最 终 会 被 号 入 屏幕 。 当 多 个 对 象 占据 颜色 缓冲 区 中 的 相同 像素 时 ， 必 须 
ee En 

隐藏 面 消 除 按照 如 下 步骤 完成 。 

inet neni 深度 缓冲 区 全 部 初始 化 为 表示 最 大 深度 的 值 。 

(2) 当 像素 颜色 由 片段 着 色 器 输出 时 ， 计 算 它 到 观察 者 的 距离 。 

(3) 如果 距离 小 于 深度 缓冲 区 存储 的 值 ( 对 当前 像素 )， 那 么 用 当前 像素 颜色 替换 颜色 
缓冲 区 中 的 颜色 ， 同 时 用 当前 距离 替换 深度 缓冲 区 中 的 值 ， 否 则 抛弃 当前 像素 。 

这 个 过 程 叫 作 Z-Buffer 算法 ， 如 图 2.14 所 示 。 
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Color [ ] [ ] colorBuf = new Color [pixelRows][pixelCols]; 
double [ ] [] depthBuf= new double [pixelRows][pixelCols]; 
for (each row and column) / 初始 化 颜色 和 深度 缓冲 区 
{ colorBuf[row][col] = backgroundColor; 

depthBuf [row][col] = far away; 


} 


for (each shape) / 当 新 的 像素 更 近 时 ， 更 新 缓冲 区 
{ for (each pixel in the shape) 
{ if (depth at pixel < depthBuf value) 
{ depthBuf[pixel.row][pixel.col] = depth at pixel; 
colorBuf [pixel.row][pixel.col] = color at pixel; 


return colorBuf; 





图 2.14 Z-buffer 算法 
2.2 检测 OpenGL 和 GLSL 错误 


编译 和 运行 GLSL 代码 与 普通 编码 的 过 程 不 同 ，GLSL 编译 发 生 在 C++ 运行 时 。 另 外 一 
个 复杂 的 地 方 是 GLSL 代码 并 没有 运行 在 CPU P CETE GPU 上 )， 因 此 操作 系统 不 总 
是 能 够 捕获 OpenGL 运行 时 的 错误 。 以 上 这 些 使 得 调试 变 得 很 困难 ， 因 为 常常 很 难 检测 着 
色 器 是 否 失败 ， 以 及 为 什么 失败 。 

程序 2.3 展示 了 用 于 捕获 和 显示 GLSL 错误 的 模块 。 其 中 GLSL 函数 glGetShaderiv() 和 
glGetProgramiv() 用 于 提供 有 关 编 译 过 的 GLSL 着 色 器 和 程序 的 信息 。 还 有 之 前 程序 2.2 中 的 
createShaderProgram() 函 数 ， 不 过 加 入 了 错误 检测 的 调用 。 

程序 2.3 包含 如 下 3 个 实用 程序 。 

@ checkOpenGLError: 检查 OpenGL 错误 标志 ， 即 是 否 发 生 OpenGL 错误 。 

© printShaderLog: “4 GLSL 编译 失败 时 ， 显 示 OpenGL HEAR. 

@ printProgramLog: 当 GLSL 链接 失败 时 ， 显 示 OpenGL 日 志 内 容 。 

checkOpenGLError() 既 用 于 检测 GLSL 编译 错误 ， 又 用 于 检测 OpenGL 运行 时 的 错误 ， 
因此 我 们 强烈 建议 在 整个 C++/OpenGL 应 用 程序 开发 过 程 中 使 用 它 。 例 如 ， 在 之 前 的 程 
序 2.2 中 ， 对 于 glCompileShader() 和 glLinkProgram() 的 调用 很 容易 用 程序 2.3 的 代码 进行 加 
强 ， 来 确认 所 有 的 拼写 错误 和 编译 错误 都 能 被 捕获 到 ， 同 时 报告 其 原因 。 

用 这 些 工具 很 重要 的 男 一 个 原因 是 ，GLSL 错误 并 不 会 导致 CHEAT. Alt, BRIE 
程序 员 通 过 步 进 找到 错误 发 生 的 点 ， 否 则 调试 会 非常 困难 。 


程序 2.3 用 以 捕获 GLSL 错误 的 模块 


void printShaderLog (GLuint shader) { 
int len = 0; 
int chWrittn = 0; 
char *log; 
glGetShaderiv(shader, GL INFO LOG LENGTH, &len); 
if (len > 0) { 


log = (char *)malloc (len); 
glGetShaderInfoLog(shader, len, &chWrittn, log); 
cout << "Shader Info Log: " << log << endl; 


free (log); 
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void printProgramLog(int prog) { 
int len = 0; 
int chWrittn = 0; 
char *log; 
glGetProgramiv(prog, GL_INFO_ LOG LENGTH, &len); 
if (len > 0) { 


log = (char *)malloc(len); 
glGetProgramInfoLog(prog, len, &chWrittn, log); 
cout << "Program Info Log: " << log << endl; 
free (log); 


bool checkOpenGLError() { 
bool foundError = false; 
int glErr = glGetError(); 
while (glErr != GL NO ERROR) { 
cout << "glError: " << glErr << endl; 
foundError = true; 
glErr = glGetError(); 
} 
return foundError; 
} 


检测 OpengGL 错误 的 示例 如 下 : 


GLuint createShaderProgram() { 
GLint vertCompiled; 
GLint fragCompiled; 
GLint linked; 


/7 捕获 编译 着 色 器 时 的 错误 


glCompileShader (vShader) ; 
checkOpenGLError(); 
glGetShaderiv(vShader, GL COMPILE STATUS, &vertCompiled) ; 
if (vertCompiled != 1) { 
cout << "vertex compilation failed" << endl; 
printShaderLog (vShader) ; 
} 


glCompileShader (fShader) ; 
checkOpenGLError (); 
glGetShaderiv(fShader, GL COMPILE STATUS, &fragCompiled) ; 
if (fragCompiled != 1) { 
cout << "fragment compilation failed" << endl; 
printShaderLog (fShader) ; 
} 


// 捕获 链接 着 色 器 时 的 错误 


glAttachShader(vfProgram, vShader) ; 
glAttachShader(vfProgram, fShader) ; 
glLinkProgram(vfProgram) ; 
checkOpenGLError (); 
glGetProgramiv(vfProgram, GL_LINK_STATUS, &linked); 
if (linked != 1) { 
cout << "linking failed" << endl; 
printProgramLog(vfProgram) ; 
} 


return vfProgram; 
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还 有 一 些 其 他 用 于 推测 着 色 器 代码 运行 时 错误 成 因 的 技巧 。 着 色 器 运行 时 错误 的 常见 结 
果 是 输出 屏幕 上 完全 空白 ,根本 没有 输出 。 即 使 是 着 色 器 中 的 一 个 小 拼写 错误 也 可 能 导致 
这 种 结果 ， 这 样 就 很 难 断 定 是 哪个 管线 阶段 发 生 了 错误 。 没 有 任何 输出 的 情况 下 ， 找 到 错 
误 的 成 因 就 像 大 海 捞 针 。 

其 中 一 种 有 用 的 技巧 就 是 暂时 将 片段 着 色 器 换 成 程序 2.2 中 的 片段 着 色 器 ,回忆 程序 2.2 
中 ,片段 着 色 器 仅 输 出 一 个 特定 颜色 一 一 例如 蓝 色 。 如 果 后 来 的 输出 中 的 几何 形状 正确 (但 
是 全 是 蓝 色 )， 那 么 顶点 着 色 器 应 该 是 正确 的 ， 错 误 应 该 发 生 在 片段 着 色 器 。 如 果 输 出 的 仍 
然 是 空白 屏幕 ， 那 错误 很 可 能 发 生 在 管线 的 更 早期 ， 壁 如 顶点 着 色 器 。 

在 附录 C 中 ， 我 们 展示 了 另 一 种 有 用 的 调试 工具 ， 叫 作 Nsight， 适 用 于 特定 型 号 Nvidia 
显卡 的 机 器 。 


2.3 从 文件 谍 取 GLSL 源 代 码 


到 此 为 止 ，GLSL 着 色 器 代码 已 经 内 联 存储 在 字符 串 中 了 。 当 程序 变 得 更 复杂 时 ， 这 人 么 
做 就 不 实际 了 。 我 们 应 当 将 我 们 的 着 色 器 代码 存在 文件 中 并 读 入 它们 。 

读 入 文本 文件 是 基础 Ct+ 技 能， 我 们 在 此 就 不 著述 了 。 但 是 ， 为 实用 起 见 ， 用 于 读 取 着 
色 器 的 代码 readShaderSource() 在 程序 2.4 中 提供 。 它 读 取 着 色 器 文本 文件 并 返回 一 个 字符 串 
数组 ， 其 中 每 个 字符 串 是 文件 中 的 一 行文 本 。 然 后 根据 读 入 的 行 数 确定 该 数组 的 大 小 。 注 
意 ，createShaderProgram() 在 这 里 奉 换 了 程序 2.2 中 的 版 本 。 在 本 例 中 ， 顶 点 着 色 器 和 片段 
着 色 器 代码 现在 分 别 放 在 文本 文件 “vertShader.gls1” 和 “fragShaderglsl1” 中 。 


程序 2.4 从 文件 读 取 GLSL 源 文件 
(....#includes 与 之 前 相同 ，main()，display()，init() 也 与 之 前 相同 ， 同 时 加 入 如 下 代码 . . . ) 


#include <string> 
#include <iostream> 
#include <fstream> 


string readShaderSource(const char *filePath) { 

string content; 

ifstream fileStream(filePath, ios::in); 

string line = "" 

while (!fileStream.eof()) { 
getline(fileStream, line); 
content.append(line + "\n"); 

} 

fileStream.close(); 

return content; 

} 


GLuint createShaderProgram() { 
(. . .与 之 前 相同 ， 同 时 加 入 如 下 代码 . . . ) 
string vertShaderStr = readShaderSource("vertShader.glsl"); 
string fragShaderStr = readShaderSource("fragShader.glsl"); 


const char *vertShaderSrc = vertShaderStr.c_str(); 
const char *fragShaderSrc = fragShaderStr.c_str(); 
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glShaderSource(vShader, 1, &vertShaderSrc, NULL); 
glShaderSource(fShader, 1, &fragShaderSrc, NULL); 


(oo FEA A TEAL ) 


24 从 顶点 构建 对 和 象 


最 终 我 们 想 要 绘制 的 不 止 是 一 个 单独 的 点 ， 而 是 想 要 绘制 由 很 nn best 
的 大 部 分 章节 将 会 致力 于 这 一 主题 。 现在 我 们 从 一 个 简单 的 例子 开始 
个 顶点 ， 并 用 它们 绘制 一 个 三 角形 ， 如 图 2.15 所 示 。 
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图 2.15 绘制 简单 三 角形 


我 们 可 以 通过 对 程序 2.2 (事实 上 是 从 文件 读 入 着 色 器 的 程序 2.4) 进行 两 个 小 改动 来 实 
现 绘制 三 角形 :(a) 修改 顶点 着 色 器 ， 以 便 将 3 个 不 同 的 点 输出 到 后 续 的 管线 阶段 ，(b) 修 
改 glIDrawArrays() 调 用 ， 指 定 3 个 顶点。 

在 C++/OpenGL 应 用 程序 中 [特别 是 在 glDrawArrays() 调 用 中 ] 我 们 指定 了 
GL_TRIANGLES (而 非 GL_POINTS)， 同 时 也 指定 了 管线 中 有 3 个 顶点 。 这 样 顶 点 着 色 器 
会 在 每 个 迭代 运行 3 遍 ， 内 置 变量 gl VertexID 会 自 增 (初始 值 为 0)。 通 过 检测 gl VertexID 
的 值 ， 着 色 器 设计 为 可 以 在 每 次 运行 时 输出 不 同 的 点 。 前 面 说 到 这 3 个 点 之 后 会 人 
化 阶段 ， 生 成 一 个 填充 过 的 三 角形 。 程序 的 改动 显示 在 程序 2.5 中 (余下 的 代码 与 之 前 在 程 
序 2.4 中 的 相同 )。 


2.5 绘制 三 角形 





#version 430 

void main(void) 

{ if (gl_VertexID == 0) gl_ Position = vec4( 0.25, -0.25, 0.0, 1.0); 
else if (gl_VertexID == 1)-gl Position = vec4(-0.25, -0.25, 0.0, 1.0); 
else gl Position = vec4( 0.25, 0.25, 0.0, 1.0); 

} 


C++/OpenGL 应 用 程序 一 在 display () 函数 中 


glDrawArrays (GL TRIANGLES, 0, 3); 
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2.5 ”场景 动画 


本 书 中 的 很 多 技术 可 以 用 于 动画 。 当 场景 中 的 物体 移动 或 改变 时 ， 场 景 会 被 重复 泻 染 以 
实时 反映 这 些 改动 。 

回顾 2.1.1 小 节 中 ,我 们 构建 的 main0) 函 数 只 调用 了 init0 一 次 ,之 后 就 重复 调用 display()。 
因此 虽然 前 面 所 有 的 例子 看 起 来 都 是 静态 绘制 的 场景 , 但 实际 上 main0) 函 数 中 的 循环 会 让 它 
们 一 次 又 一 次 地 绘制 。 

因此 ，main(0) 函 数 的 结构 已 经 可 以 支持 动画 了 。 我 们 只 需要 设计 display0) 函 数 来 随时 间 
改变 绘制 的 东西 。 场 景 的 每 一 次 绘制 都 叫 作 一 帧 ， 调 用 display0 的 频率 叫 作 帧 率 。 在 程序 逻 
辑 中 移动 的 速率 可 以 通过 自前 一 帧 到 目前 经 过 的 时 间 来 控制 (这 就 是 为 什么 我 们 会 将 
“currentTime” 作 为 display() 函 数 的 参数 )。 

程序 2.6 中 展示 了 动画 示例 。 我 们 使 用 了 程序 2.5 中 的 三 角形 ， 并 给 它 加 入 了 先 向 右 ， 
再 向 左 ， 往 复 移动 的 动画 。 在 本 例 中 ， 我 们 不 考虑 经 过 的 时 间 ， 因 此 三 角形 的 移动 或 快 或 
慢 ， 基 于 运行 计算 机 的 处 理 速度 。 在 未 来 的 示例 中 ， 我 们 将 会 使 用 经 过 的 时 间 来 确保 无 论 
在 什么 配置 的 计算 机 上 运行 ， 动 画 都 保持 以 同样 的 速度 播放 。 

在 程序 2.6 中 ， 程 序 的 display() 方 法 维持 一 个 变量 “x” 用 于 偏 移 三 角形 的 X 轴 位 置 。 每 
当 display0 调 用 时 ， 它 的 值 都 会 改变 (因此 每 帧 都 不 同 )。 同 时 每 当 它 到 达 1.0 或 者 -1.0 IN, 
都 会 改变 方向 。 在 x 中 的 值 会 被 复制 到 顶点 着 色 器 的 “offset” 变 量 中 。 执 行 这 个 复制 的 机 
制 叫 作 Uniform 变量 〈 统 一 变量 )， 稍 后 我 们 会 在 第 4 章 中 学 习 它 。 目 前 不 必 了 解 统一 变量 
的 细节 。 现 在 ， 只 需要 注意 C++HOpenGL 应 用 程序 先 调用 glGetUniformLocation() 获 取 指向 
“offset” 变 量 的 指针 ， 之 后 调用 glProgramUniformlfO 将 x 的 值 复制 给 offset。 之 后 顶点 着 色 
器 会 将 offset 加 给 所 绘制 三 角形 的 了 坐标。 注意 ， 每 次 调用 displayO 时 背景 都 会 被 清除 ， 以 
避免 三 角形 移动 时 留 下 一 串 轨迹 。 图 2.16 展示 了 3 个 时 间 点 显示 的 图 像 (当然 ， 书 中 的 静 
态 图 是 无 法 展示 移动 的 )。 


程序 2.6 ”简单 动画 示例 
C++/OpenGL 应 用 程序 : 





// #includes 与 之 前 相同 ， 定 义 也 与 之 前 相同 ， 同 时 加 入 如 下 代码 : 
float x = 0.0f; // 三 角形 在 x 轴 的 位 置 
float inc = 0.01f; // 移动 三 角形 的 偏 移 量 


void display (GLFWwindow* window, double currentTime) { 
glClear (GL_DEPTH BUFFER BIT); 
glClearColor(0.0, 0.0, 0.0, 1.0); 
glClear(GL_COLOR BUFFER BIT); // 每 次 将 背景 清除 为 黑色 


glUseProgram(renderingProgram) ; 


x += inc; // 切换 至 让 三 角形 向 右 移动 
if (x > 1.0f) inc = -0.01f; // 沿 x 轴 移动 三 角形 
if (x < -1.0f) inc = 0.01f; // 切换 至 让 三 角形 向 左 移动 


GLuint offsetLoc = glGetUniformLocation(renderingProgram, “offset");  // 获取 "offset" 指针 
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glProgramUniformlf(renderingProgram, offsetLoc, x); // 将 "x" 中 的 值 传 给 "offset" 







glDrawArrays (GL TRIANGLES, 0, 3) ; 


. // 其 余 函 数 同 前 例 
} 


#version 430 
uniform float offset; 


void main (void) 
{ if (gl_VertexID == 0) gl_Position = vec4( 0.25 + offset, -0.25, 0.0, 1.0); 
else if (gl_VertexID == 1) gl_ Position = vec4(-0.25 + offset, -0.25, 0.0, 1.0); 


else gl_ Position = vec4( 0.25 + offset, 0.25, 0.0, 1.0); 
} 





注意 ， 除 了 添加 三 角形 动画 代码 之 外 ， 我 们 还 在 displayO 函 数 的 开头 添加 了 这 行 代码 : 


glClear (GL DEPTH BUFFER_BIT) ; 
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图 2.16 移动 的 三 角形 动画 


虽然 在 本 例 中 并 不 是 必需 的 ， 我们 仍然 把 它 加 在 这 里 ， 同 时 它 会 在 之 后 的 大 多 数 应 用 程 


vO 
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序 中 存在 。 回 忆 2.1.7 小 节 中 讨论 的 ， 隐 藏 面 消除 需要 同时 用 到 颜色 缓冲 区 和 竣 度 缓冲 区 。 
当 我 们 后 面 渐渐 地 开始 绘制 更 复杂 的 3D 场景 时 ， 每 帧 初始 化 (清除 ) 深度 缓冲 区 就 是 必要 
的 ， 尤 其 是 对 于 动画 场景 ， 要 确保 深度 对 比 不 会 受 旧 的 深度 数据 影响 。 从 前 面 的 例子 中 可 
以 明显 看 出 ， 清 除 深度 缓冲 区 的 命令 与 清除 颜色 缓冲 区 的 命令 基本 相同 。 


2.6 C++ 代码 文件 结构 


目前 为 止 ， 我 们 的 所 有 C+H/OpenGL 应 用 程序 代码 都 放 在 同一 个 叫 作 “main.cpp” 的 文 
件 中 ，GLSL 着 色 器 代码 放 在 “vertShaderglsl1” 和 “fragShaderglsl” 文 件 中 。 我 们 承认 在 
main.cpp 中 塞 进 很 多 应 用 代码 不 是 最 佳 实践 ,但 我 们 在 本 书 中 采用 这 个 约定 ， 以 便于 在 每 个 
例子 中 ， 哪 个 文件 包含 这 个 例子 中 主要 的 C+HOpenGL 代码 这 件 事 都 很 清楚 。 在 本 教材 中 ， 
主要 的 C+HOpenGL 文件 总 是 叫 作 “main.cpp”。 在 实践 中 ， 应 用 程序 当然 应 该 模块 化 ， 以 
适当 对 应 应 用 的 各 功能 。 

但 是 ， 当 我 们 继续 学 习 时 ， 我 们 会 遇 到 一 些 情况 。 在 这 些 情况 下 ， 我 们 会 创建 一 些 实用 
的 模块 ， 并 在 不 同 的 应 用 程序 中 使 用 。 当 时 机 适当 ， 我 们 会 将 这 些 模块 分 离 到 单独 的 文件 
中 以 便 重 用 。 例 如 ， 稍 后 我 们 会 定义 一 个 Sphere 类 。 这 个 类 会 在 很 多 例子 中 用 到 ， 因 此 它 
会 分 到 它 自 己 的 文件 〈Sphere.cpp 和 Sphere.h) F. 

相似 地 ， 当 我 们 遇 到 需要 重用 函数 的 时 候 ， 我们 会 把 它们 放 进 “Utils:cpp”( 与 “Utils.h” 
关联 )。 我 们 已 经 看 到 好 几 个 适合 放 进 “Utils.cpp” 的 函数 了 : 2.2 节 中 描述 的 错误 检测 模 
KA 2.3 节 中 描述 的 用 来 读 入 GLSL 着 色 器 的 函数 。 后 者 非常 适合 重 载 W 
“createShaderProgram()” 可 以 对 应 用 中 所 有 可 能 的 管线 着 色 器 组 合 进行 定义 : 


© GLuint Utils::createShaderProgram(const char *vp, const char *fp) 

® GLuint Utils::createShaderProgram(const char *vp, const char *gp, const char *fp) 

@ GLuint Utils::createShaderProgram(const char *vp, const char *tCS, const char* tES, const char *fp) 

@ GLuint Utils::createShaderProgram(const char *vp, const char *tCS, const char* tES, const char *gp, 
const char *fp) 


以 上 列 出 的 第 一 个 条 目 支 持 仅 使 用 了 顶点 着 色 器 和 片段 着 色 器 的 程序 。 第 二 个 支持 使 用 
了 顶点 着 色 器 、 几 何 着 色 器 和 片段 着 色 器 的 情况 。 第 三 个 支持 用 了 顶点 着 色 器 、 曲 面 细 分 
着 色 器 和 片段 着 色 器 的 情况 。 第 四 个 支持 用 了 顶点 着 色 器 、 曲 面 细 分 着 色 器 、 几 何 着 色 器 
和 片段 着 色 器 的 情况 。 每 个 条 目 中 ， 接 受 的 参数 都 包含 着 色 器 代码 的 GLSL 文件 路 径 。 例 
如 ， 如 下 调用 使 用 了 其 中 一 个 重 载 函 数 ， 以 编译 并 链接 包含 顶点 着 色 器 和 片段 着 色 器 的 管 
线 。 编 译 链接 后 的 程序 被 放 在 变量 “renderingProgram” 中 : 


renderingProgram = Utils::createShaderProgram("vertShader.glsl", "fragShader.glsl") ; 


这 些 createShaderProgram() 实 现 都 可 以 在 随 书 附 赠 的 配套 资源 中 找到 (在 “Utils.cpp” 文 
We 同时 它们 都 包含 了 2.2 节 中 的 错误 处 理 。 它 们 并 没有 什么 新 内 容 ， 只 是 用 这 种 方式 
组 织 以 便 使 用 。 随 着 我 们 继续 向 前 推进 本 书 ， 会 有 更 多 相似 的 函数 加 入 Utils.cpp。 我 们 强烈 
鼓励 读者 阅读 配套 资源 中 的 Utils.cpp 文件 ， 甚 至 有 需要 时 可 在 其 中 加 入 函数 。 配 套 资源 中 的 
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程序 是 根据 学 习 本 书 的 方法 构建 的 ， 因 此 了 解 它们 的 结构 应 当 有 助 加 强 自 己 对 书 中 内 容 的 理 
解 。 
我 们 对 于 在 “Utils.cpp” 文件 中 的 函数 , 都 以 静态 函数 进行 实现 , 因此 不 需要 实例 化 Utils 
类 。 基 于 正在 开发 的 系统 架构 ， 读 者 可 能 会 倾向 于 使 用 实例 方法 甚至 独立 函数 实现 它们 。 
我 们 所 有 的 着 色 器 文件 都 使 用 “.gls1” 后 缀 。 


补充 说 明 


在 本 章 中 ， 还 有 很 多 我 们 没有 讨论 到 的 OpenGL 管线 细节 。 我 们 略 过 了 许多 内 部 阶段 ， 
同时 完全 省 略 了 纹理 的 处 理 。 我 们 在 本 章 的 目标 是 ， 对 后 面 要 用 来 编码 的 框架 有 尽 可 能 简 
单 的 整体 印象 。 当 我 们 继续 学 习 时 ， 会 学 到 更 多 的 细节 。 同 时 我 们 也 推迟 了 展示 曲面 细 分 
着 色 器 和 几何 着 色 器 的 代码 。 在 之 后 的 章节 中 ， 我 们 会 构建 一 套 完整 的 系统 ， 来 展现 如 何 
为 每 个 阶段 编写 实际 的 着 色 器 。 

对 于 如 何 组 织 场景 动画 代码 ， 尤 其 是 线程 管理 ， 有 着 更 复杂 的 方法 。 有 的 语言 中 的 库 ， 
如 JOGL 和 LWJGL (对 于 Java) 会 提供 一 些 支持 动画 的 类 。 我 们 鼓励 对 于 设计 特定 应 用 泻 
染 循环 (或 者 “游戏 循环 ”) 感 兴趣 的 读者 去 读 一 些 在 游戏 引擎 设计 上 更 加 专业 的 图 书 上 7 9， 
同时 跟踪 在 gamedev.net ?' 上 的 讨论 。 

我 们 在 glShaderSource(0 命 令 上 注释 了 一 个 细节 。 它 的 第 四 个 参数 指定 了 一 个 “长 度数 
组 ” 其 中 包括 给 定 着 色 器 程序 中 每 行 代码 的 字符 串 的 整数 长 度 。 如 果 这 个 参数 被 设 为 null， 
像 我 们 之 前 那样 ，OpenGL 将 会 自动 从 以 null 结尾 的 字符 串 中 构建 这 个 数组 。 因 此 我 们 特地 
确保 所 有 我 们 传 给 glShaderSource0O 的 字符 串 都 是 以 null 结尾 的 [通过 在 createShaderProgram() 
中 调用 c_str0 函 数 ]。 实 际 中 通常 也 会 遇 到 手动 构建 这 些 数组 而 非 传 入 null 的 应 用 程序 。 

在 本 书 中 ， 读 者 可 能 多 次 想 要 了 解 OpenGL 某 些 方面 的 数值 限制 。 例 如 ， 程 序 员 可 能 需 
要 知道 几何 着 色 器 可 以 生成 的 最 大 输出 数 ， 或 者 可 以 为 泻 染 点 指定 的 最 大 尺寸 。 这 些 值 中 
很 多 都 依赖 于 实现 , 即 在 不 同 的 机 器 上 是 不 同 的 。OpenGL 提供 了 通过 使 用 glGetO 指 令 来 获 
取 这 些 值 的 机 制 。 基 于 查询 的 参数 的 不 同类 型 ，glGet() 指 令 也 有 着 不 同 的 形式 。 例 如 ， 查 询 
点 的 尺寸 的 最 大 值 时 ， 如 下 调用 会 将 最 小 值 和 最 大 值 〈 基 于 运行 机 器 上 的 OpenGL 实现 ) 
放 入 名 为 “size” 的 数组 中 的 前 两 个 元 素 。 

glGetFloatv(GL_POINT SIZE RANGE, size) 

这 类 查询 有 很 多 。 更 多 示例 参见 OpenGL 参考 文档 [9。 

在 本 章 中 ， 我 们 尝试 在 每 次 OpenGL 调用 时 ， 描 述 其 各 个 参数 。 当 我 们 向 后 推进 时 ， 这 
么 做 就 会 显得 见 余 ， 因 此 当 我 们 觉得 描述 参数 只 会 妨碍 理解 时 ， 就 不 会 描述 该 参数 。 这 是 
因为 很 多 OpenGL 函数 有 大 量 与 我 们 示例 无 关 的 参数 。 必 要 时 读者 应 当 使 用 OpenGL 文档 
来 获取 参数 详情 。 


习题 


2.1 ”修改 程序 2.2, 增 加 动画 ,让 绘制 的 点 周而复始 地 放大 和 缩小 。 提 示 : 使 用 glPointSize() 
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方法 ， 用 一 个 变量 作为 参数 。 

2.2 ”修改 程序 2.5， 使 之 绘制 等 腰 三 角形 (而 非 图 2.15 所 示 的 直角 三 角形 )。 

2.3 (RA) 修改 程序 2.5， 使 之 包含 程序 2.3 中 所 示 的 错误 检查 模块 。 之 后 ， 尝 试 在 
着 色 器 中 加 入 各 种 错误 ， 同 时 观察 泻 染 行为 以 及 生成 的 错误 信息 。 


[GD17] Game Development Network, accessed October 2018. 

[NY14] R. Nystrom, “Game Loop,” in Game Programming Patterns (Genever Benning, 2014), and accessed 
October 2018. 

[OP 16] OpenGL 4.5 Reference Pages, accessed July 2016. 

[SW15] G. Sellers, R. Wright Jr., and N. Haemel, OpenGL SuperBible: Comprehensive Tutorial and Reference, 7th 
ed. (Addison-Wesley, 2015). 

(OpenGL 超级 宝典 (第 5 版 )》(ISBN 978-7-115-27456-4, EW? 108 JG), ER OpenGL WEP. 
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计算 机 图 形 学 中 大 量 使 用 了 数学 原理 , 尤其 是 矩阵 和 和 矩阵 代数 。 虽 然 我 们 倾向 于 认为 3D 
图 形 编程 是 最 现代 的 技术 领域 之 一 《〈 它 在 很 多 方面 确实 是 )， 但 它 用 到 的 很 多 技术 实际 上 可 
以 追溯 到 上 百年 前 。 其 中 一 些 甚至 是 文艺 复兴 时 期 的 伟大 哲学 家 们 就 已 经 理解 并 记录 的 。 

3D 图 形 学 中 几乎 每 个 方面 、 每 种 效果 一 一 移动 、 缩 放 、 透 视 、 纹 理 、 光 照 、 阴 影 等 一 一 
都 在 很 大 程度 上 以 数学 方式 实现 。 

这 里 ， 我 们 假设 读者 具备 基础 的 矩阵 运算 知识 。 对 于 基础 矩阵 代数 的 完整 讲解 超出 了 本 
书 的 范围 。 因 此 ， 如 果 读 者 在 任何 时 候 发 现 自己 不 理解 特定 的 矩阵 操作 ， 则 应 当先 找 一 些 
相关 材料 进行 阅读 ， 确 保 完 全 理解 矩阵 操作 之 后 再 继续 学 习 。 





3.1 3D 坐标 系统 


3D 空间 通常 用 3 个 坐标 轴 系 了 和 2Z 来 表示 。 这 3 个 轴 可 以 以 两 种 方式 来 布置 ， 左手 或 右 
手 〈 它 们 是 以 轴 的 朝向 来 命名 的 ， 通 过 左手 或 右手 大 拇指 与 食指 、 中 指 成 直角 来 进行 构造 )。" 
如 图 3.1 所 示 。 





左手 坐标 系 右手 坐标 系 
图 3.1 3D 坐标 系统 


知道 图 形 编程 环境 所 使 用 的 坐标 系 是 很 重要 的 。 例 如 ，OpenGL 中 的 坐标 系 大 体 是 右手 
坐标 系 ， 而 Direct3D 中 大 体 是 左手 坐标 系 。 在 本 书 中 ， 除 非特 别 说 明 ， 否 则 我 们 都 是 用 右 
手 坐 标 系 。 


a2 A 


3D 空间 中 的 点 可 以 通过 使 用 形 如 (2, 8, -3) WS, SUX Y ZEKER. AR, 


@ 大 拇指 代表 Z 轴 ， 食 指 代表 XX 轴 ， 中 指 代 表 了 轴 。 图 3.1 中 ， 左 手 大 拇指 向 外 ， 手 心 向 上 ; 右手 大 拇指 向 内 ， 手 心 向 上 。 
”一 一 译 者 注 
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如 果 用 齐 次 坐标 一 一 一 种 在 19 世纪 初 首次 描述 的 表示 法 来 表示 点 会 更 有 用 。 在 每 个 点 的 齐 
次 坐标 有 4 个 值 。 前 3 个 值 表示 XY 了 和 2Z， 第 四 个 值 灰 总 是 非 零 值 ， 通 常 为 1。 因此， 我 
们 会 将 之 前 的 点 表示 为 (2, 8, -3, 1)。 正 如 我 们 稍 后 将 要 看 到 的 ， 齐 次 坐标 将 会 使 我 们 的 图 
形 学 计算 更 高 效 。 

用 来 存储 齐 次 3D 坐标 的 GLSL 数据 类 型 是 vec4 (“vec” 代 表 向 量 ， 同 时 也 可 以 用 来 表 
示 点 )。GLM 库 包 含 适 合 在 C++/OpenGL 应 用 中 创建 和 存储 3 元 和 4 元 ( 齐 次 ) 点 的 类 ， 
分 别 叫 作 vec3 和 vec4。 


3.3 ”和 矩阵 


短 阵 是 矩形 的 值 阵列 ， 它 的 元 素 通常 使 用 下 标 访问 。 第 一 个 下 标 表示 行 号 ， 第 二 个 下 标 
表示 列 号 ， 下 标 从 0 开始 。 我 们 在 3D 图 形 计 算 中 要 用 到 的 矩阵 大 多 数 大 小 为 4X4， 如 图 3.2 
所 示 。 


图 3.2 4X4 Fa RE 


GLSL 语言 中 的 mat4 数据 类 型 用 来 存储 4X4 矩阵。 同样 ，GLM 中 有 mat4 类 用 以 实例 
化 并 存储 4X4 和 矩阵 。 
单位 矩阵 中 一 条 对 角 线 的 值 为 1， 其 余 值 全 为 0: 


1 0+ 00 


oo © 
© O = 
or © 


0 
0 
1 


任何 值 乘 以 单位 矩阵 都 不 会 改变 。 在 GLM 中 ， 调 用 构造 函数 glm::mat4 m(1.0D 以 在 变 
量 m 中 生成 单位 矩阵 。 
矩阵 转 置 的 计算 是 通过 交换 矩阵 的 行 和 列 完 成 的 。 例 如 ; 


Ayo Ay, Ay, Ay; Ay A, 0 Ay, A 
Ao Ay Ay A; zs Ay, A, A,, A, 
Ay A, A, A, Ay Ay A, A, 
Ay A,, Ay, Ay, Ay A, 3 A, A, 


GLM 库 和 GLSL 库 都 有 转 置 函数 ， 分 别 是 glm::transpose(mat4) Ail transpose(mat4). 
矩阵 加 法 简单 明了 : 


w 
So 


1 
2 
3 
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Ata B+b C+c D+d A BiiCcy D a be cd 
Eren EEF G4 gchah) PEF (Gi H 3 全 [5 & ch 
I+i J+j K+k Lel ois Ke is 六 
M+m N+n O+o P+p M N O P m n ow 


在 GLSL 中 ，+ 运 算 符 在 mat4 上 进行 了 重 载 ， 以 支持 矩阵 加 法 。 
3D 图 形 学 中 有 很 多 有 用 的 矩阵 乘法 操作 。 和 矩阵 乘法 一 般 可 以 从 左 向 右 或 从 右 疝 左 处 理 
(注意 ， 由 于 左 乘 和 右 乘 是 不 同 的 ， 所 以 矩阵 乘法 不 满足 交换 律 )。 
在 3D 图 形 学 中 ， 点 与 矩阵 相 乘 通常 从 右 向 左 ， 得 到 点 ， 如 : 
AX+BY+CZ4D\ [A B C DT {xX 
EX+FY+GZ+H| |E F G HI |Y 
Ranitz | |r IKEI 
MX+NY+0zZ+H) |M NO P| \1 


注意 ， 我 们 用 齐 次 坐标 将 点 (X, Y, ZT) 2a AIBA 1 的 矩阵 。 
GLSL 和 GLM 都 支持 点 《确切 地 说 是 vec4) 与 矩阵 使 用 * 操 作 符 相 乘 。 
4X4 矩阵 与 4X4 和 矩阵 相 乘 如 下 : 


A BG D a@ b cid 
E F G H f gh 

x = 
L J KL WORI 


e 

i 
M- N O P m nh oO p 
Aa+Be+Ci+Dm Ab+Bf+Cj+Dn Ac+Bg+Ck+Do Ad+Bh+Cl+Dp 
Ea+Fe+Gi+Hm Eb+Ff+Gj+Hn Ec+Fg+Gk+Ho Ed+Fh+Gl+Hp 
la+Je+Ki+Lm Ib+Jf+Kj+Lln  Ic+Jg+Kk+Lo Id+Jh+kKl+Lp 
Ma+Ne+Oi+Pm Mb+Nf+Oj+Pn Mc+Ng+Ok+Po Md+Nh+Ol+Pp 


和 矩阵 相 乘 也 经 常 叫 作 合并 ， 稍 后 我 们 会 看 到 ， 它 可 以 用 于 将 一 系列 矩阵 变换 合并 成 一 个 
矩阵。 这 种 合并 和 矩阵 变换 的 能 力 来 自 矩 阵 乘 法 的 结合 律 。 
考虑 如 下 运算 序列 : 
New Point = Matrix, x (Matrix, x (Matrix, x Point)) 
我 们 将 一 个 点 与 Matrixs 相 乘 ， 之 后 将 结果 与 Matrixs 相 乘 ， 最 后 将 结果 与 Matrixi HR. 
其 结果 是 一 个 新 的 点 。 结 合 律 确保 了 之 前 的 计算 与 如 下 计算 相同 : 
New Point = (Matrix, x Matrix, x Matrix, ) x Point 
我 们 先 将 3 EMEA AG, 建立 Matrix, Matrixa, Matrix; 的 连接 。 如 果 我 们 称 其 为 Matrixc， 
我 们 束 可 以 将 之 前 的 运算 写作 ; 
New Point = Matrix, x Point 
我 们 稍 后 在 第 4 章 会 看 到 这 么 做 的 好 处 是 ,我 们 需要 经 常 将 相同 的 一 系列 矩阵 变换 应 用 到 
场景 中 的 每 个 点 上 。 通 过 预先 一 次 计算 好 这 些 矩 阵 的 合并 ， 就 可 以 成 倍 减少 总 的 矩阵 运算 量 。 
GLSL 和 GLM 都 支持 使 用 重 载 后 的 * 运 算 符 进 行 矩 阵 乘法 。 
一 个 4X4 和 抢 阵 的 道 矩 阵 是 另 一 个 4X4 和 抢 阵 ， 用 M- 表示 ， 在 矩阵 乘法 中 有 如 下 性 质 : 
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M x M` = M` x M = 单位 矩阵 
TE HE BRAT Bt AS HE as BEA T o BAE, Ra EAE A AE EH BE EAE RE ES S 
量 很 大 。 幸 运 的 是 我 们 只 有 很 少 情况 下 需要 用 到 它 。 在 这 些 极 少 的 情况 下 ，GLSL 和 GLM 
都 提供 了 mat4.inverse() 函 数 。 


3.4 变换 矩阵 


在 图 形 学 中 ， 和 矩阵 通常 用 来 进行 物体 的 变换 。 例 如 和 矩阵 可 以 用 来 将 点 从 一 处 移动 到 男 一 
处 。 在 本 章 中 ， 我 们 将 会 学 习 5 个 有 用 的 变换 矩阵 : 

@ 平移 矩阵 ; 

® 缩放 和 矩阵; 

@ 旋转 矩阵 ; 

@ 投影 矩阵 ; 

@ LookAt 敌阵 。 

变换 矩阵 的 重要 特性 之 一 就 是 它们 都 是 4X4 和 矩阵 。 这 是 因为 我 们 决定 使 用 齐 次 坐标 系 。 
否则 ， 各 变换 矩阵 可 能 会 有 不 同 的 维度 并 且 无 法 相 乘 。 正 如 我 们 所 见 ， 确 保 变换 矩阵 大 小 相 
同 并 不 只 是 为 了 方便 ， 同 时 让 它们 可 以 任意 组 合 ， 进 行 预先 计算 变换 矩阵 以 提升 性 能 。 


3.4.1 平移 矩阵 


平移 矩阵 用 于 将 物体 从 一 个 位 置 移 至 另 一 位 置 。 +T, i 
它 包含 一 个 单位 矩阵 ， 同 时 X 了 和 Z 的 移动 量 在 的 P : 1 0 m 
Aos Ais Azo B 3.3 展示 了 平移 矩阵 和 它 与 齐 次 坐 | Z+T 001 Tz 
标点 相 乘 的 效果 。 其 结果 是 一 个 以 平移 值 “ 移 动 过 ” 1 000 1 
的 点 。 图 3.3 平移 矩阵 变换 

注意 ,作为 与 平移 矩阵 相 乘 的 结果 ， 点 (X, Y, DFE T MEANT, YHT, Z+T-) 0 
同样 需要 注意 的 是 这 个 乘法 是 从 右 向 左 相 乘 。 

例如 ， 当 我 们 想 要 将 一 组 点 向 上 沿 了 轴 正 方向 移动 $ 个 单位 ， 我 们 可 以 通过 给 一 个 单位 
矩阵 的 T, MEIA 5 来 构建 平移 矩阵 。 之 后 我 们 只 需要 将 我 们 想 要 移动 的 点 与 矩阵 相 乘 就 
可 以 了 。 

GLM 中 有 一 些 函数 是 用 于 构建 与 点 相 乘 的 平移 矩阵 的 。 其 中 相关 的 操作 有 : 

© glm::translate(x, y, Z) 构 建 平 移 (x, y, z) 的 矩阵 ; 


@ = mat4 x vec4。 


3.4.2 缩放 矩阵 


缩放 矩阵 用 于 改变 物体 的 大 小 或 者 将 点 向 原点 相反 方向 移动 。 虽 然 缩放 点 这 个 操作 乍 一 
看 有 点 奇怪 ， 不 过 OpenGL 中 的 物体 都 是 用 一 组 或 多 组 的 点 定义 的 。 因 此 ， 缩 放 物体 涉及 
缩放 它 的 点 的 集合 。 
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缩放 和 矩阵 变换 由 单位 矩阵 和 位 于 Ago, Ann, Azo 的 X * Sx S 8 0 0 X 
X, Y, Z 缩 放 因子 组 成 。 图 3.4 PERTRA |Y*Sy\_ |0 Sy 0 Of fY 
形式 和 当 它 与 齐 次 坐标 点 相 乘 的 效果 : 所 得 的 结果 是 ae ' = Sz A A 


经 过 缩放 值 修改 后 的 新 点 。 

GLM 中 有 一 些 函数 是 用 于 构建 与 点 相 乘 的 缩放 
矩阵 的 。 其 中 相关 的 操作 有 : 

@ glm::scale(x, y, z) 构建 缩放 (x, y, z) 的 矩阵 ; 

© mat4 x vec4。 

缩放 还 可 以 用 来 切换 坐标 系 。 例 如 ， 我 们 可 以 用 缩放 来 在 给 定 右手 坐标 系 的 情况 下 确定 
左手 坐标 。 从 图 3.1 中 我 们 可 以 看 到 通过 反 转 Z 坐标 就 可 以 在 右手 坐标 系 和 左手 坐标 系 中 切 
换 ， 因 此 ， 用 来 切换 坐标 系 的 缩放 和 矩阵 变换 是 ， 

1 


图 3.4 缩放 矩阵 变换 


oono 
iso 
SSS 


0 
0 
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3.4.3 ”旋转 矩阵 


旋转 会 稍微 复杂 一 些 , 因为 在 3D 空间 中 旋转 物体 需要 指定 旋转 轴 和 旋转 的 角度 或 弧度 。 

在 16 世纪 中 叶 , 数学 家 莱 昂 哈 德 。 欧 拉 表 明 , 围绕 任何 轴 的 旋转 都 可 以 表示 为 绕 系 Y, 
Z 轴 旋 转 的 组 合 E 0。 围绕 这 3 个 轴 的 旋转 角度 被 称 为 欧 拉 角 。 这 个 被 称 为 欧 拉 定 理 的 发 现 ， 
对 我 们 很 上 用， 因为 对 于 每 个 坐标 轴 的 旋转 可 以 用 和 矩阵 变换 来 表示 。 

旋转 变换 有 3 种 ， 分 别 是 绕 系 了 和 Z 轴 旋转 ， 见 图 3.5。 同 时 GLM 中 也 有 一 些 用 于 构 
建 旋转 矩阵 的 函数 。 

© gim::rotate(mat4, 0, x, y, Zz) 构建 绕 成 巴 Z 轴 旋转 0 度 的 缩放 矩阵 。 

GEXA TIES OPE : 


© mat4 x vec4. 
x" 1 
y 0 ae ee 
z: s yi = 
1 


绕 7 轴 旋转 9 度 : 


X ng 0 
Y 1 
p )- 一 cn 0 
ps 0 


绕 Z 轴 旋转 6 度 : 


x’ cos? —sin@ 
y je 8 er 
Z: 

1 


图 3.5 ”旋转 变换 矩阵 
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实践 中 ， 当 3D 衬 间 中 旋转 轴 不 穿 过 原点 时 ， 物 体 使 用 欧 拉 角 进 行 旋 转 需 要 几 个 额外 的 
步骤 。 一 般 有 : 

(1) 平移 旋转 轴 以 使 它 经 过 原点 ; 

(2) BEX, 了 和 Z 轴 旋转 适当 的 欧 拉 角 ; 

(3) 复原 步骤 (1) 中 的 平移 。 

图 3.5 中 所 示 的 3 个 旋转 变换 都 有 自己 有 趣 的 特性 ， 即 反 向 旋转 的 矩阵 恰 等 于 其 转 置 矩 
阵 。 通 过 观察 之 前 这 些 矩 阵 ， 同 时 有 cos(-0) = cos(O) 和 sin(-0) = -sin(9)， 即 可 验证 。 后 面 将 
会 用 到 这 个 特性 。 

欧 拉 角 在 某 些 3D 图 形 应 用 中 会 导致 一 些 瑕 疯 。 因 此 ， 通 常 在 计算 旋转 时 推荐 使 用 四 元 
数 。 有 兴趣 探索 四 元 数 的 读者 可 以 寻求 很 多 已 有 的 资源 (如 v9)。 欧 拉 角 足以 满足 我 们 的 
大 部 分 需求 。 


3.5 sje 


向 量 表示 大 小 和 方向 。 它 们 没有 特定 位 置 。“ 移 动 ”向 量 并 不 改变 它 所 代表 的 含义 。 

记录 丫 量 的 方法 各 式 各 样 ， 如 : 一 端 带 箭头 的 线段 、 二 元 组 (幅度, 方向) 或 两 点 之 差 。 
在 3D 图 形 学 中 ,向 量 一 般 用 空间 中 的 单个 点 表示 ， 向 量 的 大 小 是 原点 到 该 点 的 距离 ， 方 向 
则 是 原点 到 该 点 的 方向 。 在 图 3.6 中 ， 向 量 信 可 以 用 点 Pl 和 P, 之 间 的 差 表示 ， 也 可 以 等 价 
地 用 原点 到 Ps 来 表示 。 在 我 们 的 所 有 应 用 中 ， 我 们 都 简单 地 将 玉 表 示 为 (x, y, z)， 即 我 们 用 
来 表示 P; 的 符号 。 





图 3.6 向 量 严 的 两 种 表示 


用 与 表示 点 相同 的 方式 来 表示 向 量 很 方便 ， 因 为 我 们 对 点 和 向 量 用 同样 的 矩阵 变换 。 不 
过 这 也 会 使 困惑。 因此， 我们 有 时 候 会 在 向 量 上 加 一 个 小 箭头 〈 如 瑚 )。 许 多 图 形 系 统 并 
不 区 分 点 和 回 量 ， 如 GLSL 和 GLM， 它 们 所 提供 的 vec3/vec4 类 型 既 能 用 来 存储 点 ， 又 能 
用 来 存储 向 量 。 有 的 系统 〈 例 如 本 书 Java 早期 版 本 中 所 用 到 的 graphicslib3D JÆ) 对 于 点 和 
向 量 有 着 不 同 的 类 ， 强 制 使 用 适当 的 类 来 进行 所 需 的 操作 。 对 于 点 和 向 量 使 用 同一 种 类 型 
还 是 不 同 的 类 型 哪个 更 好 这 件 事 上 仍然 没有 定论 。 

TE GLM I GLSL 中 有 许多 3D 图 形 学 中 经 常用 到 的 向 量 操作 。 如 假设 有 向 量 Alu, v, w) 
和 B(x, y, 2): 
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加 减法 : 
A+B=(u+x,v+y,w+z) 
glm: vec3 + vec3 

GLSL: vec3 + vec3 


归 一 化 《〈 变 为 长 度 =1): 

A = A/\A| = A/sqrt(u’+v’+w*), 其 中 |4|= 向 量 4 的 长 度 
glm: normalize(vec3) 或 normalize(vec4) 

GLSL: normalize(vec3) 或 normalize(vec4) 


点 积 : 

A* B=ux+vyt+wz 

glm: dot(vec3,vec3) 或 dot(vec4,vec4) 
GLSL: dot(vec3,vec3) 或 dot(vec4,vec4) 


又 积 : 

A x B = (vz-wy, wx-uz, uy-vx) 
glm: cross(vec3,vec3) 
GLSL: cross(vec3,vec3) 


其 他 有 用 的 向 量 函数 如 magnitude (在 GLSL 和 GLM FÆ length()). reflection 和 refraction 


(在 GLSL 和 GLM 中 都 有 )。 


我 们 现在 仔细 看 一 下 点 积 和 又 积 函 数 。 
3.5.1 点 积 的 应 用 
在 本 书 中 的 程序 大 量 使 用 了 点 积 。 点 积 最 重要 也 最 基本 的 应 用 是 求解 两 向 量 夹 角 。 设 有 


向 量 信 和， 计算 其 夹 角 为 0。 


V 
bis ii 
VeW =| V || W |cos(8) 
V eW 
Wi Soe 
acral 


因此 , 如 果 VA W AE TERY ed at ERKE R It —— E H “4” vid IE BLD, 


则 有 : 


cos(0)=V e W 
0 =arccos(V e W) 
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有 趣 的 是 ， 我 们 后 面 会 看 到 通常 用 到 的 是 cos(9)， 而 非 9。 因 此 ， 这 两 个 推导 出 的 公式 
都 很 有 用 。 
点 积 同 时 还 有 许多 其 他 用 途 。 
@ 求解 向 量 的 大 小 ，VJFr 。F 。 
求解 两 向 量 是 否 正 交 ， 若 正 交 ， 则 VeW=0。 
求解 两 向 量 是 否 平行 ， 若 平行 ， 则 VeW V |W]|. 
求解 两 各 量 是 否 平 行 但 指向 相反 方向 ， 若 满足 ， 则 VeW =-|VI|W|。 
求解 两 向 量 夹 角 是 否 在 (-90° ~+90°): VeW>0. 
求解 点 P=(x, y, z) 到 平面 S=(a, b, c, 四 的 最 小 有 符号 距离 。 首 先 ， 求 垂直 于 S 的 单位 
EE: à= peo pee 以 及 从 原点 到 平面 的 最 
[some Ma 上 + 有 +c Vae+b? +c? 
d 
一 一 一 一 。 之 后 从 P 到 5 的 最 小 有 符号 距离 为 (hh。P)+D， 其 符号 
Va bo = sled 
H P E S 的 哪 边 决 定 。 
3.5.2 ”又 积 的 应 用 


短 距离 D = 


两 向 量 又 积 的 一 个 重要 特性 是 ， 它 会 生成 一 个 新 的 向 量 ， 新 的 向 量 正 交 (垂直) 于 之 前 
两 个 向 量 所 定义 的 平面 。 我 们 会 在 本 书 中 大 量 使 用 到 这 一 特性 。 

任意 两 个 不 共 线 向 量 都 定义 了 一 个 平面 。 例 如 考虑 两 个 任意 向 量 六 和 所 。 由 于 向 量 可 
以 在 不 改变 含义 的 情况 下 进行 平 黎 ， 因 此 ， 可 以 将 它们 移动 到 起 点 相交 的 位 置 。 图 3.7 展示 
了 亚 和 了 球 定 义 的 平面 ， 以 及 其 又 积 所 得 法 向 量 。 其 所 得 法 向 量 的 方向 遵循 右手 定 则 ， 即 将 
右手 手指 从 严 向 所 卷曲 会 使 得 大 拇指 指向 法 向 量 R。 

注意 ， 这 里 顺序 很 重要 。 了 球 x 这 将 会 得 到 与 RR 方向 相反 的 向 量 。 

通过 又 积 来 获得 法 向 量 的 能 力 对 我 们 后 面 要 学 习 的 光照 部 分 非常 重要 。 为 了 确定 光照 效 
果 ， 我 们 需要 知道 所 泻 染 模型 的 外 向 法 向 量 。 图 3.8 中 展示 了 一 个 例子 ， 其 中 有 一 个 6 个 点 
(顶点 ) 构成 的 简单 模型 ， 使 用 又 积 计算 来 获得 其 中 一 面 的 外 向 法 向 量 。 





图 3.7 ”又 积 得 到 法 向 量 图 3.8 计算 外 向 法 向 量 


3.6 ”局 部 和 世界 空间 


3D 图 形 学 〈 用 OpenGL 或 其 他 框架 ) 常见 的 应 用 是 模拟 三 维 世界 、 在 其 中 放 入 物体 并 
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在 显示 器 上 观看 它 。 放 在 3D 世界 的 物体 通常 用 三 角形 的 集合 来 进行 建 模 。 稍 后 我 们 会 在 第 
6 章 中 详细 讲解 建 模 。 但 是 我 们 可 以 先 了 解 一 下 大 致 的 处 理 过 程 。 

当 建 立 物体 的 3D 模型 时 , 我 们 通常 以 最 方便 的 定位 方式 描述 模型 。 如 果 模 型 是 个 球形 ， 
那么 我 们 很 可 能 将 球 心 定位 于 原点 〈0,0,0) 并 赋予 它 一 个 方便 的 半径 ， 比 如 1。 模 型 定义 的 
室 间 叫 作 局 部 空间 Cocal space) 或 模型 空间 (model space). OpenGL 文档 使 用 的 术语 是 物 
体 空 间 Cobject space). 

之 后 这 个 球形 可 能 用 于 一 个 大 模型 的 部 
分 , 如 成 为 机 器 人 的 头 部 。 这 个 机 器 人 , 当然 ， 
定义 在 它 自 己 的 局 部 /模型 空间 。 我 们 可 以 用 
3.9 所 示 的 矩阵 变换 通过 缩放 、 旋 转 和 平 
移 ， 将 球形 模型 放 在 机 器 人 模型 的 空间 。 通 
过 这 种 方式 ， 可 以 分 层次 地 构建 复杂 模型 
CHE 4.8 节 中 会 进一步 通过 使 用 一 堆 矩 阵 讲 解 图 3.9 球形 和 机 器 人 的 模型 空间 
这 个 主题 )。 

使 用 同样 的 方式 , 通过 设 定 物体 在 模拟 世界 中 的 朝向 和 大 小 , 将 物体 放 在 模拟 这 个 世界 的 
空间 中 ， 这 个 空间 叫 作 世界 空间 。 将 对 象 定位 及 定向 在 世界 空间 的 矩阵 称 为 模型 矩阵 或 1。 





3.7 视觉 空间 和 合成 相机 


到 此 为 止 ， 我 们 所 接触 的 变换 矩阵 全 都 在 3D 空间 中 操作 。 但 是 ， 我 们 最 终 需 要 将 3D 
空间 一 一 或 它 的 一 部 分 一 一 展示 在 2D 显示 器 上 。 为 了 达成 这 个 目标 ， 我 们 需要 找到 一 个 有 
利 点 。 正 如 我 们 在 现实 世界 通过 眼睛 从 一 点 观察 一 样 ， 我 们 也 必须 找到 一 点 并 确立 观察 方 
向 作为 我 们 观察 虚拟 世界 的 窗口 。 这 个 点 叫 作 “视图 ”或 “视觉 ”空间 ， 或 “合成 相机 ”。 

如 图 3.10 和 图 3.12 所 示 ， 观 察 3D 世界 需要 :(a) 将 相机 放 入 世界 的 某 个 位 置 ,(b) vil 
整 相 机 的 角度 , 通常 需要 一 套 它 自己 的 直角 坐标 轴 UAV/N;(c) 定 义 一 个 视 体 (view volume); 
Cd) 将 视 体 内 的 对 象 投影 到 投影 平面 (projection plane) E. 








图 3.10 将 相机 放 入 3D 世界 中 


OpenGL 有 一 个 固定 在 原点 (0,0,0) 并 向 下 看 向 Z 轴 负 方 向 的 相机 ， 如 图 3.11 所 示 。 
为 了 应 用 OpenGL 相机 ， 我 们 需要 做 的 是 将 它 模 拟 移动 到 适合 的 位 置 和 方向 。 我们 需要 
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先 找 出 在 世界 中 的 物体 与 我 们 期 望 的 相机 位 置 的 相对 位 置 〈 如 物体 应 该 在 由 图 3.12 所 示 相 
BLU. Vy Y 轴 定义 的 “相机 空间 ”中 的 何 处 )。 给 定 世界 空间 中 的 点 Pp， 我 们 需要 通过 变 
换 将 它 转换 成 相应 相机 空间 中 的 点 ， 从 而 让 它 看 起 来 好 像 是 我 们 从 期 望 的 相机 位 置 Cw 进行 
观看 的 。 我 们 通过 计算 它 在 相机 空间 中 的 位 置 Pc 实现 。 已 知 OpenGL 相机 位 置 永远 固定 在 
点 (0,0,0)， 问 : 我 们 如 何 变换 来 实现 上 述 功 能 ? 





图 3.11 OpenGL 固定 相机 图 3.12 ”相机 方向 


需要 做 的 变换 如 下 : 

(1) 将 Pw 平移 ， 其 向 量 为 负 的 期 望 相 机 位 置 。 

(2) 将 Pw 旋转 ， 其 角度 为 负 的 期 望 相 机 旋转 的 欧 拉 角 。 

我 们 可 以 构建 一 个 单一 变换 矩阵 以 完成 旋转 和 平移 ， 这 个 矩阵 叫 作 视图 变换 (viewing 
transform) 矩阵 V. JERE 严 通 过 合并 德 阵 了 (包含 负 相 机 期 望 位 置 的 平移 矩阵 ) 和 R (包含 
负 相 机 期 望 旋转 的 旋转 矩阵 )。 在 本 例 中 ， 从 右 向 左 ， 我 们 先 平移 世界 空间 中 的 点 Prs 之 后 
旋转 : 

Pco=R(T* Py) 

如 前 所 见 ， 通 过 结合 律 我 们 得 到 如 下 运算 : 

Pc=(R*T) Py 
如 果 我 们 将 合并 后 的 尺 * 了 存 入 矩阵 VV, 运 算 成 为 
Pco=V* Py 

完整 的 计算 以 及 T 和 R 的 准确 内 容 在 图 3.13 F RAK TIER R 的 推导 一 一 推导 

WHER RRM), 








负 相 机 旋转 角 负 相 机 位 置 

Xc Oy Oy OU, 0} -a 0 0 —Cy Py 
()- “ae Bee 4 of | | 

Ze Ny Ny No 0 0 0. 1 -=6s Pz 

1 0 0 和 三 证 O° O80 1 1 
视觉 空间 有 (旋转 ) TFB) 世界 空间 
中 的 点 Pe 中 的 点 Pn 

V( 视 图 变换 ) 


图 3.13 ”推导 视图 矩阵 
通常 ， 严 矩阵 与 模型 矩阵 M 合并 成 为 一 个 模型 -视图 Cmodel-view, MV) 和 矩阵: 
MV=V*M 
之 后 ， 点 PEA ACHRES fe at FAR BY DA A ee me Le I: 
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Pec=MV* Py 
在 复杂 场景 中 ， 当 我 们 需要 对 每 个 顶点 ， 而 非 上 只 是 一 个 点 做 这 个 变换 的 时 候 ， 这 种 方法 
的 好 处 就 很 明显 了 。 通 过 预先 计算 MV， 对 于 空间 中 每 个 点 的 变换 只 需要 我 们 进行 一 次 矩阵 
乘法 计算 。 之 后 ， 我 们 将 会 看 到 ， 我 们 可 以 将 这 个 过 程 延伸 到 与 计算 更 多 的 合并 和 矩阵， 以 
大 量 减 少 每 个 顶点 的 计算 量 。 


3.8 IRERE 


当 我 们 设置 好 相机 之 后 ， 就 可 以 学 习 投 影 矩 阵 了 。 我 们 需要 学 习 的 两 个 重要 的 投影 矩阵 
是 : 透视 投影 和 正 射 投影 。 


3.8.1 透视 投影 矩阵 


透视 投影 通过 使 用 透视 概念 模仿 我 们 看 真实 世界 的 方式 , 尝试 让 2D 图 像 看 起 来 像 是 3D 
的 。 物 体 近 大 远 小 ，3D 空间 中 有 的 平行 线 用 透视 法 画 出 来 就 不 再 平行 。 

透视 法 是 15 世纪 初 一 16 世纪 初 文艺 复兴 时 期 的 伟大 发 现 之 一 ， 当 时 的 画家 开始 绘制 比 
前 人 更 加 真实 的 画作 。 

图 3.14 中 是 一 个 绝 好 的 例子 。 卡 洛 。 克 里 韦 利 在 1486 年 绘制 的 《圣母 领 报 》( 又 名 《给 









图 3.14 《圣母 领 报 》( 卡 洛 。 克 里 韦 利 ，1486 Æ) 


era、 
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圣 。 埃 米 迪 乌 斯 报喜 》 目 前 收藏 于 伦敦 国家 美术 馆 ™ 鸣 )。 这 幅 画 明显 强烈 地 使 用 了 透视 一 一 
右 侧 建筑 的 左 墙 向 后 的 线条 戏剧 性 地 一 起 倾斜 。 这 种 画 法 让 人 产生 了 深度 感知 和 画 中 有 
3D 空间 的 错觉 。 这 个 过 程 中 ， 在 现实 中 平行 的 线 在 画 中 并 不 平行 。 同 样 ， 在 前 景 中 的 人 物 
比 在 背景 中 的 人 物 要 大 。 虽 然 今天 我 们 将 这 些 视 为 理所当然 的 ， 不 过 算出 实现 它 的 变换 矩 
阵 还 是 需要 一 些 数 学 分 析 的 。 

我 们 通过 使 用 变换 矩阵 将 平行 线 变 为 恰当 的 不 平行 线 来 实现 这 个 效果 。 这 个 矩阵 叫 作 透 
视 矩 阵 或 者 透视 变换 ， 通 过 定义 4 个 参数 来 进行 视 体 (view volume) 的 构建 。 其 中 4 个 参 
数 是 纵横 比 、 视 场 、 投 影 平 面 或 近 剪 裁 平 面 、 远 剪裁 平面 。 





通常 放 在 离 眼 睛 或 相机 较 近 的 位 置 ( 如 图 3.15 左 侧 所 示 )。 我 们 会 在 第 4 章 中 讨论 如 何 为 远 
剪裁 平面 选择 合适 的 值 。 视 场 是 可 视 空间 的 纵向 角度 。 纵 横 比 是 远近 剪裁 平 面 的 宽度 比 高 
度 。 通 过 这 些 元 素 所 形成 的 形状 叫 作 视 锥 (frustum )， 如 图 3.15 所 示 。 

透视 矩阵 用 于 将 3D 空间 中 的 点 变换 至 近 剪 裁 平面 上 合适 的 位 置 ， 它 的 构建 需要 先 计算 
qx Ay By C 的 值 , 之 后 用 这 些 值 来 构建 透视 矩阵 , 如 图 3.16 所 示 ( 推 导 过 程 见 参考 资料 ”1)。 


1 


q = 
tan Eey iew ) 


K q 
aspectRatio 

Znear + “far 

Znear i Zey 

E 2 * (Znear * Z far ) 


Znear — Zfar 


B= 


C 


0 
0 
A 
0 





远 剪裁 平面 
图 3.15 透视 视 体 或 视 锥 图 3.16 构建 透视 矩阵 
生成 透视 变换 矩阵 很 容易 ， 只 需要 将 所 描述 的 公式 插入 一 个 4X4 和 矩阵。GLM 库 也 包含 
了 一 个 用 于 构建 透视 矩阵 的 函数 glm::perspective()。 


3.8.2 正 射 投影 矩阵 


在 正 射 投影 中 , 平行 线 仍然 是 平行 的 , 即 不 使 用 透视 , 如 图 3.17 所 示 。 正 射 与 透视 相反 ， 
在 视 体 中 的 物体 不 因 其 距 相机 距离 做 任何 调整 ， 而 直接 进行 投影 。 

正 射 投影 是 一 种 平行 投影 ， 其 中 所 有 的 投影 都 与 投影 平面 垂直 。 正 射 矩 阵 通过 如 下 参数 
构建 : (a) 从 相机 到 投影 平面 的 距离 Zhear; Cb) 从 相机 到 远 剪 裁 平 面 的 距离 Zes CC) Ly Rs 
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T、 和 B 的 值 ， 其 中 工 和 分别 是 投影 平面 左右 边界 的 了 坐标 , T 和 B 分别 是 投影 平面 上 下 
边界 的 了 坐标 ， 如 图 3.18 所 示 。 





2 0 0 R+L 
R-L R-L 
2 i T+B 
T-B T-B 
0 0 1 A Znear 
Z far 一 Znear Z far ma; Znear 
0 0 0 1 
图 3.17 正 射 投影 图 3.18 正 射 投影 矩阵 


并 非 所 有 平行 投影 都 是 正 射 投影 ， 但 是 其 他 平行 投影 不 在 本 书 范围 内 。 

平行 投影 与 我 们 眼睛 所 见 到 的 真实 世界 不 同 。 但 是 它们 在 很 多 情况 下 都 有 其 用 处 ， 比 如 
投射 阴影 、 进 行 3D 剪裁 以 及 CAD【〈 计 算 机 辅助 设计 ) 中 一 一 用 在 CAD 中 是 因为 无 论 物体 
如 何 摆 放 ， 其 尺寸 都 不 变 。 无 论 如 何 ， 本 书 中 绝 大 多 数 例子 使 用 透视 投影 。 


3.9 LookAt 和 矩阵 


我 们 最 后 要 学 习 的 变换 是 LookAt 矩阵 。 当 你 想 要 把 相机 放 在 某 处 并 看 向 一 个 特定 的 位 
置 时 ， 就 需要 用 到 它 了 ， 如 图 3.19 所 示 。 当 然 ， 用 我 们 已 经 学 到 的 方法 也 可 以 做 到 ， 但 是 
这 个 操作 非常 频繁 ， 因 此 为 它 专门 构建 一 个 矩阵 通常 比较 有 用 。 

LookAt 变换 依然 由 相机 旋转 决定 。 我们 通过 指定 大 致 旋转 朝向 的 向 量 (如 世界 了 轴 )。 
通常 ， 可 以 通过 一 系列 又 积 获得 相机 旋转 的 正面 、 侧 面 以 及 上 面 。 图 3.20 展示 了 计算 过 
程 ， 从 相机 位 置 〈 眼 睛 )、 目 标 位 置 以 及 初始 向 上 向 量 了 来 构建 LookAt 矩阵 ， 其 推导 过 程 
在 参考 资料 55 中 。 


fwd = normalize(eye — target ) 


side = normalize(—fwd x Y) 








up = normalize(side x (—fwd)) 
a LookAt 和 矩阵 等 于 : 
eo k cs side, side, side, —(side o eye) 
ow upx Upy zz —(up*eye) 
re g —fwdy —fwdy -fwdz -(-fwd ® eye) 
0 0 0 1 
13.19 LookAt 的 元 素 图 3.20 LookAt 矩阵 


我 们 可 以 将 这 个 过 程 构建 为 一 个 C+HOpenGL 实用 函数 ， 通 过 指定 相机 位 置 、 目 标 位 置 
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以 及 初始 “向 上 ”向 量 Y, 构建 一 个 LookAt 矩阵 。 由 于 GLM 中 已 经 有 一 个 用 来 构建 LookAt 
和 矩阵 的 函数 glm::lookAt(), 我 们 用 它 就 可 以 了 。 稍 后 本 书 第 8 章 生 成 阴影 的 时 候 会 用 到 这 个 
函数 。 


3.10 ”用 来 构建 和 矩阵 变换 的 GLSL 函数 


虽然 GLM 包含 了 许多 预定 义 的 3D 变换 函数 ， 本 章 也 已 经 涵盖 了 其 中 如 平移 、 旋 转 和 
缩放 ， 但 GLSL 只 包含 了 基础 的 矩阵 运算 ， 如 加 法 、 合 并 等 。 因 此 ， 有 时 我 们 需要 自己 为 
GLSL 写 一 些 实用 函数 来 构建 3D 变换 矩阵 ， 以 在 着 色 器 中 进行 特定 3D 运算 。 用 于 存储 这 
些 和 矩阵 的 GLSL 数据 类 型 是 mat4。 

GLSL 中 用 于 初始 化 mat4 矩阵 的 语法 以 列 为 单位 读 入 值 。 前 4 个 参数 会 放 入 第 一 列 , 接 
下 来 4 个 参数 放 入 下 一 列 ， 直 到 第 四 列 ， 如 下 所 示 : 

OO 

OO, 2.0, 0:0; 0-0; 


00; O20," 1.0) :00 
Eir fey S25 1.0 19 


构建 如 图 3.3 所 示 的 平移 矩阵 。 
程序 3.1 中 包含 了 5 个 用 于 构建 4X4 平 移 、 旋 转 和 缩放 矩阵 的 GLSL 函数 ， 每 个 函数 对 
应 于 本 章 之 前 给 出 的 一 个 公式 。 我 们 稍 后 在 书 中 将 会 用 到 这 些 函 数 。 


程序 3.1 在 GLSL 中 构建 变换 矩阵 


// 构建 并 返回 平移 矩阵 
mat4 buildTranslatė(float x, float y, float z) 
{ mat4 trans = mat4(1.0, 0.0 


è 0 
0.0, 1.0, 0.0, 0.0; 
0.0, 0.10, 1.0, 0.20 
K Vy Ze 20%) 


return trans; 


} 


// 构建 并 返回 绕 X 轴 的 旋转 矩阵 

mat4 buildRotateX(float rad) 

{ mat4 xrot = mat4(1.0, 0.0, 0.0, 0.0, 
0.0, cos(rad), -sin(rad), 0.0, 
0.0, sin(rad), cos(rad), 0.0, 
0.0, 0.0, 0.0, 220 fy 

return xrot; 
} 


// 构建 并 返回 绕 Y 轴 的 旋转 矩阵 

mat4 buildRotateY (float rad) 

{ mat4 yrot = mat4(cos(rad), 0.0, sin(rad), 0.0, 
0.0, 1.0), 0.0) 0.0, 
-sin(rad), 0.0, cos(rad), 0.0, 
0.0, 6.0, 0.0, 1.0 ys 

return yrot; 
} 
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// 构建 并 返回 绕 2 轴 的 旋转 矩阵 
mat4 buildRotateZ(float rad) 
{ mat4 zrot = mat4(cos(rad), -sin(rad), 0.0, 0.0, 
sin(rad), cos(rad), 0.0, 0.0, 
0.0, 0.0, 1.8, 0.0, 
0.0, 6.0, 6.0, 1.0 Y} 
return zrot; 


} 


// 构建 并 返回 缩放 矩阵 
mat4 buildScale(float x, float y, float z) 
{ mat4 scale = mat4(x, 0.0, 0.0 


ooo 


€ 
0; 
, Z, 
0.0, 
return scale; 


补充 说 明 


在 本 章 中 我 们 看 到 了 使 用 矩阵 对 点 进行 变换 的 例子 。 稍 后 ， 我 们 会 将 同样 的 变换 应 用 于 
向 量 。 要 对 向 量 亚 使 用 变换 矩阵 M 进行 与 点 相同 的 变换 ， 一 般 需 要 计算 M 的 逆转 置 矩阵 ， 
记 为 (M ) ， 并 用 所 得 矩阵 乘 以 V。 在 某 些 情况 下 ，M=(M”')"， 在 这 些 情况 下 只 要 用 M 就 
可 以 了 。 例 如 ， 本 章 中 我 们 所 见 到 的 基础 旋转 矩阵 与 它们 的 逆转 置 矩阵 相等 ， 我 们 可 以 直 
接 将 他 们 应 用 于 向 量 〈 同 样 也 可 以 应 用 于 点 )。 因 此 本 书 中 有 时 候 使 用 (M- 六 对 向 量 进行 变 
换 ， 有 时 候 仅 使 用 Mo 

本 章 中 仍 未 讨论 的 一 个 技术 是 在 空间 中 平滑 地 移动 相机 。 这 是 一 种 很 有 用 的 技术 ， 在 制 
作 游戏 和 CGI 电影 时 更 加 明显 ， 同 时 也 适用 于 可 视 化 、 虚 拟 现实 和 3D 建 模 。 

我 们 也 没有 讲解 所 有 给 出 的 矩阵 变换 的 推导 过 程 ( 见 其 他 资源 ， 如 参考 资料 中 )。 相 
反 ， 我 们 努力 做 到 简明 地 总 结 了 基础 3D 图 形 学 变种 中 必 备 的 点 、 向 量 和 矩阵 运算 。 随 着 本 
书 的 推进 ， 我 们 将 会 看 到 本 章 中 方法 的 许多 实际 应 用 。 


习题 


3.1 修改 程序 2.5, 为 顶点 着 色 器 添加 程序 3.1 中 的 一 个 buildRotate() 函 数 ， 并 将 其 应 用 
到 组 成 三 角形 的 点 上 。 其 结果 应 该 导致 三 角形 从 原来 的 方向 进行 旋转 。 这 个 旋转 过 程 无 须 
动画 化 。 

3.2 CRA) 在 3.4 节 末 尾 ， 我 们 讲 到 欧 拉 角 在 某 些 情况 下 会 导致 瑕 疫 。 其 中 最 常见 
的 叫 作 “万 向 节 死 锁 ?。 描 述 万 向 节 死 锁 ， 给 出 一 个 例子 ， 并 解释 为 什么 万 向 节 死 锁 会 是 
个 问题 。 

3.3 CPR) 避免 这 些 瑕 疲 的 一 种 方法 是 使 用 四 元 数 而 非 欧 拉 角 。 我 们 在 本 书 中 并 没有 
学 习 四 元 数 ， 但 是 GLM 有 一 些 四 元 数 相 关 的 类 和 函数 。 请 独立 学 习 四 元 数 ， 并 熟悉 GLM 
中 的 四 元 数 功能 。 
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第 4 章 管理 3D 图 形 数据 


使 用 OpenGL A% 3D 图 形 通 常 需要 将 若干 数据 集 发 送 给 OpenGL 着 色 器 管线 。 举 个 例 
子 ， 想 要 绘制 一 个 简单 的 3D 对 象 ， 比 如 一 个 立方 体 ， 你 至 少 需要 发 送 以 下 项 目 。 

@ 立方体 模型 的 顶点 。 

@ ”控制 立方 体 在 3D 空间 中 朝向 表现 的 变换 矩阵 。 

把 数据 发 送 给 OpenGL 管线 还 要 更 加 复杂 一 点 ， 有 两 种 方式 。 

@ 通过 顶点 属性 的 缓冲 区 。 

@ 直接 发 送 给 统一 变量 。 

理解 这 两 种 机 制 具 体 如 何 工作 非常 重要 , 这 样 我 们 才能 为 每 个 要 发 送 的 项 目 选取 合适 的 
方法 。 

让 我 们 从 泻 染 一 个 简单 的 立方 体 开始 。 


4.1 缓冲 区 和 顶点 属性 


想 要 绘制 一 个 对 象 ， 它 的 顶点 数据 需要 被 发 送 给 顶点 着 色 器 。 通 常会 把 顶点 数据 在 C++ 
端 放 入 一 个 缓冲 区 ， 并 把 这 个 缓冲 区 和 着 色 器 中 声明 的 顶点 属性 相关 联 。 要 完成 这 件 事 ， 
有 好 几 个 步骤 ， 有 些 步 又 只 需要 做 一 次 ， 而 如 果 是 动画 场景 的 话 ， 有 些 步骤 需要 每 帧 都 做 
一 次 : 

只 做 一 次 的 步骤 一 一 一 般 是 在 init() 中 。 

(1) 创建 一 个 缓冲 区 。 

(2) 将 顶点 数据 复制 到 缓冲 区 。 

每 帧 都 要 做 的 步骤 一 一 一 般 是 在 display) P- 

d) 启用 包含 了 顶点 数据 的 缓冲 区 。 

(2) 将 这 个 缓冲 区 和 一 个 顶点 属性 相关 联 。 

(3) 启用 这 个 顶点 属性 。 

(4) 使 用 glDrawArrays(...) 绘 制 对 象 。 

所 有 缓冲 区 通常 在 程序 开始 的 时 候 统一 创建 ， 可 以 在 init) 中 ， 或 者 在 被 initO 调 用 的 函 
数 中 。 在 OpenGL 中 ,缓冲 区 被 包含 在 项 点 缓冲 对 象 《Vertex Buffer Object, VBO) 中 , VBO 
在 C++/OpenGL 应 用 程序 中 被 声明 和 实例 化 。 一 个 场景 可 能 需要 很 多 VBO， 所 以 常常 会 
initO 中 生成 并 填充 若干 个 VBO, 这 样 在 你 的 程序 需要 绘制 一 个 或 多 个 VBO 的 时 候 就 可 以 直 
接 使 用 。 

缓冲 区 使 用 特定 的 方式 和 顶点 属性 交互 。 当 glDrawArrays(0) 被 执行 时 ， 绥 冲 区 中 的 数据 
开始 流动 ， 从 缓冲 区 的 开头 开始 ， 按 顺序 流 过 顶点 着 色 器 。 像 第 2 章 中 介绍 的 一 样 ， 顶 点 
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着 色 器 对 每 个 顶点 执行 一 次 。3D 空间 中 的 epi AE 1 


顶点 需要 3 个 数值 , 所 以 着 色 器 中 的 顶点 属 
性 常常 会 以 vec3 类 型 接收 到 这 3 个 数值 。 
然后 , 对 缓冲 区 中 的 每 组 这 3 个 数值 , 着 色 
器 会 被 调用 ， 如 图 4.1 所 示 。 

OpenGL 中 还 有 一 种 相关 的 结构 ， 叫 作 
顶点 数组 对 象 (Vertex Array Object, VAO). 


in vec3 position 


position =(2.0, 3.8, -1.0) 





顶点 着 色 器 调用 #2 





in vec3 position 
position = (7.6, -2.5, -1.7 ) 







OpenGL 的 3.0 版 本 引入 了 VAO, 作为 一 种 

组 织 缓冲 区 的 方法 , 让 缓冲 区 在 复杂 场景 中 

更 容易 操控 。OpenGL 要 求 至 少 创建 一 个 

VAO， 对 我 们 现在 来 说 一 个 就 够 了 。 
举 个 例子 ， 假 设 我 们 想 要 显示 两 个 对 

象 。 在 C++ 端 ， 我 们 可 以 声明 一 个 VAO 和 

两 个 相关 的 VBO〈 每 个 对 象 一 个 )， 就 像 这 样 


// OpenGL 要 求 这 些 数值 以 数组 的 形式 指定 





in vec3 position 
position = (4.0, 0.0, 1.2) 


图 4.1 在 VBO 和 顶点 属性 之 间 的 数据 传递 


GLuint vao[1]; 
GLuint vbo[2]; 


glGenVertexArrays(1, vao); 
glBindVertexArray(vao[0]); 
glGenBuffers(2, vbo); 


glGenVertexArrays()4ll glGenBuffers() 这 两 个 OpenGL 命令 分 别 创建 VAO 和 VBO, JiR 
回 它们 的 整数 型 ID 。 我 们 把 这 些 ID 存 进 整数 型 数组 vao 和 vbo 中 。 这 两 个 命令 各 自 有 两 个 
BR, 第 一 个 是 要 创建 多 少 个 ID, 第 二 个 是 用 来 保存 返回 的 ID 的 数组 。glBindVertexArraysO 
命令 的 目的 是 将 指定 的 VAO 标记 为 “活跃 ” 这 样 生成 的 缓冲 区 ?就 会 和 这 个 VAO 相关 联 。 

每 个 缓冲 区 需要 有 在 顶点 着 色 器 中 声明 的 相应 的 顶点 属性 变量 。 顶 点 属性 通常 是 着 色 器 
中 首先 被 声明 的 变量 。 在 我 们 的 立方 体例 子 中 ， 用 来 接收 立方 体 顶 点 的 顶点 属性 可 以 在 项 
点 着 色 器 中 这 样 声 明 : 


layout (location = 0) in vec3 position; 


关键 字 in 意思 是 “输入 ”(input)， 表 示 这 个 顶点 属性 将 会 从 缓冲 区 中 接收 数值 (我 们 
以 后 会 看 到 ， 顶 点 属性 也 可 以 用 来 “输出 ”)。 像 我 们 之 前 看 到 的 一 样 ,，“vec3” 的 意思 是 着 
色 器 的 每 次 调用 会 抓 到 3 个 浮 点 类 型 数值 (分 别 表示 x、y、z， 它 们 组 成 一 个 顶点 数据 )。 
变量 的 名 字 是 “position ”命令 中 “layout (location=0)” 这 部 分 叫 作 “layonut 修饰 符 ” 也 就 
是 我 们 把 顶点 属性 和 特定 缓冲 区 关联 起 来 的 方法 。 这 意味 着 ， 这 个 顶点 属性 的 识别 号 是 0， 
我 们 后 面 会 用 到 。 

我 们 把 一 个 模型 的 顶点 加 载 到 缓冲 区 (VBO) 的 方式 取决 于 模型 的 顶点 数值 存储 在 哪 
里 。 在 第 6 章 中 , 我 们 将 会 看 到 通常 如 何 使 用 建 模 工 具 ( 比 如 Blender Sr 或 者 Maya M^) 


@ 在 这 个 例子 中 ， 我 们 声明 了 两 个 缓冲 区 ， 以 强调 我 们 常常 会 用 到 多 个 缓冲 区 。 后 面 我 们 会 用 到 额外 的 缓冲 区 来 存储 顶点 相 
关 的 其 他 信息 ， 比 如 颜色 。 现 在 ， 我 们 只 用 到 了 一 个 声明 的 缓冲 区 ， 所 以 如 果 只 声明 一 个 VBO 也 是 足够 的 。 
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创建 模型 、 导 出 成 标准 文件 格式 (比如 .obj， 在 第 6 章 会 介绍 ) 并 导入 到 C++H/OpenGL 应 
用 程序 。 我 们 还 会 看 到 模型 的 顶点 如 何 被 临时 计算 出 来 , 或 者 在 管线 中 使 用 细 分 着 色 器 生 
成 出 来 。 

现在 ,假设 我 们 想 要 绘制 一 个 立方 体 , 并 且 假 定 我 们 的 立方 体 的 顶点 数据 在 CHHOpenGL 
应 用 程序 中 的 数组 中 直接 指定 。 在 这 种 情况 下 ， 我 们 需要 Ca) 将 这 些 值 复制 到 我 们 之 前 生 
成 的 两 个 缓冲 区 中 的 一 个 之 中 。 为 此 ， 我 们 需要 使 用 OpenGL 的 glBindBuffer() 命 令 将 缓冲 
区 例如， 第 0 个 缓冲 区 ) 标记 为 “活跃 ”并 且 (b) 使 用 glBufferData() 命 令 将 包含 顶点 
数据 的 数组 复制 进 活跃 缓冲 区 “这 里 应 该 是 第 0 个 VBO)。 假 设 顶点 存储 在 名 为 vPositions 
的 浮 点 类 型 数组 中 ， 以 下 C++ 代码 "会 将 这 些 值 复制 到 第 0 个 VBO 中 : 


glBindBuffer (GL_ARRAY BUFFER, vbo[0]); 
glBufferData(GL_ARRAY BUFFER, sizeof(vPositions), vPositions, GL_STATIC_DRAW) ; 


接 下 来 ， 我 们 向 display0 中 添加 代码 ， 将 缓冲 区 中 的 值 发 送 到 着 色 器 中 的 顶点 属性 。 我 
们 通过 以 下 3 个 步骤 来 实现 : Ca) 使 用 glBindBuffer0) 命 令 标记 这 个 缓冲 区 为 “活跃 ”， 正 如 


上 所 述 ;(b) 将 活跃 缓冲 区 与 着 色 器 中 的 顶点 属性 相关 联 ;(c) 启用 顶点 属性 。 以 下 代码 行 
实现 了 这 些 步骤: 
glBindBuffer (GL ARRAY BUFFER, vbo[0]); // 标记 第 0 个 缓冲 区 为 "活跃 " 
glVertexAttribPointer(0, 3, GL FLOAT, GL FALSE, 0, 0); // 将 第 0 个 属性 关联 到 缓冲 区 
glEnableVertexAttribArray (0) ; // 启用 第 0 个 顶点 属性 
现在 ， 当 我 们 执行 glDrawArraysO0 时 ， 第 0 个 VBO 中 的 数据 将 被 传输 给 拥有 位 置 0 的 
layout 修饰 符 的 顶点 属性 中 。 这 会 将 立方 体 的 顶点 数据 发 送 到 着 色 器 。 


4.2 ”统一 变量 


要 想 演 染 一 个 场景 以 使 它 看 起 来 是 3D 的 ， 需 要 构建 适当 的 变换 矩阵 ， 例 如 第 3 章 中 描 
述 的 那些 ， 并 将 它们 应 用 于 模型 的 每 个 顶点 。 在 顶点 着 色 器 中 应 用 所 需 的 矩阵 运算 是 最 有 
效 的 ， 并 且 习 惯 上 会 将 这 些 矩 阵 从 C+4+/OpenGL 应 用 程序 发 送 给 着 色 器 中 的 统一 变量 。 

使 用 “uniform” 关 键 字 在 着 色 器 中 声明 统一 变量 。 以 下 示例 声明 了 用 于 存储 模型 -视图 
和 投影 矩阵 的 变量 ， 足 够 我 们 的 立方 体 程序 使 用 : 


uniform mat4 mv_matrix; 
uniform mat4 proj matrix; 


关键 字 “mat4” 表 示 这 些 是 4X4 和 矩阵 。 这 里 我 们 将 用 来 保存 模型 -视图 矩阵 的 变量 命名 
为 my_matrix， 并 将 用 来 保存 投影 矩阵 的 变量 命名 为 proj_matrix。 因 为 3D 变换 是 4X4 的 ， 
因此 mat4 是 GLSL 着 色 器 统一 中 常用 的 数据 类 型 。 

将 数据 从 C++/OpenGL 应 用 程序 发 送 到 统一 变量 需要 执行 以 下 步骤 : (Ca) 获取 统一 变量 
的 引用 ; Cb) 将 指向 所 需 数 值 的 指针 与 获取 的 统一 引用 相关 联 。 在 我 们 的 立方 体例 子 中 ， 


© 请 注意 ， 这 里 ， 我 们 第 一 次 避免 描述 一 个 或 多 个 OpenGL 调用 中 的 每 一 个 参数 。 如 第 2 章 所 述 ， 我 们 建议 读者 根据 需要 利 
用 OpenGL 文档 来 获取 此 类 详细 信息 。 
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假设 链接 的 演 染 程序 保存 在 名 为 “renderingProgram” 的 变量 中 ， 以 下 代码 行 表示 ， 我 们 要 
把 模型 -视图 和 投影 矩阵 发 送 到 两 个 统一 变量 mv_matrix 和 proj_matrix 中 去 : 


mvLoc = glGetUniformLocation(renderingProgram, "mv_matrix") ; // 获取 着 色 器 程序 中 统一 变量 的 位 置 
projLoc = glGetUniformLocation(renderingProgram,"proj matrix"); 
glUniformMatrix4fv(mvLoc, 1, GL FALSE, glm::value_ptr(mvMat)); // 将 矩阵 数据 发 送 到 统一 变量 中 


glUniformMatrix4fv(projLoc, 1, GL FALSE, glm::value_ptr(pMat) ); 


在 上 面 的 例子 中 ， 我 们 假设 已 经 利用 GLM 工具 来 构建 模型 -视图 和 投影 矩阵 变换 
mvMat 和 pMat， 稍 后 将 会 更 详细 地 讨论 。 它 们 是 mat4 类 型 (GLM 的 一 个 类 ) 的 。GLM 
函数 调用 value_ptr0) 返 回 对 和 矩阵 数据 的 引用 ，glUniformMatrix4fv() 需 要 将 这 些 矩 阵 值 传递 
给 统一 变量 。 


4.3 ”顶点 属性 插值 


相 较 于 如 何 处 理 统 一 变量 ， 了 解 如 何在 OpenGL 管线 中 处 理 顶 点 属性 非常 重要 。 回 想 一 
下 ， 在 片段 着 色 器 光栅 化 之 前 ， 由 顶点 定义 的 图 元 (例如 ， 三 角形 ) 被 转换 为 片段 。 光 栅 


化 过 程 会 线性 插值 顶点 属性 值 ， 以 便 显示 的 像素 能 无 颖 连接 建 模 的 曲面 。 

相 比 之 下 ， 统 一 变量 的 行为 类 似 于 初始 化 过 的 常量 ， 并 且 在 每 次 顶点 着 色 器 调用 《〈 即 从 
缓冲 区 发 送 的 每 个 顶点 ) 中 保持 不 变 。 统 一 变量 本 身 不 是 插值 的 ;无 论 有 多 少 顶 点 ， 它 始 
终 包 含 相同 的 值 。 

光栅 着 色 器 对 顶点 属性 进行 的 插值 在 很 多 方面 都 很 有 用 。 稍 后 ， 我 们 将 使 用 光栅 化 来 插 
值 颜色 、 纹 理 坐 标 和 曲面 法 向 量 。 重 要 的 是 要 理解 通过 缓冲 区 发 送 到 顶点 属性 的 所 有 值 都 
将 在 管线 中 被 进一步 插值 。 

我 们 在 顶点 着 色 器 中 看 到 顶点 属性 被 声明 为 “ip”， 表 示 它 们 从 缓冲 区 接收 值 。 顶 点 
属性 还 可 以 改 为 声明 为 “out” 这 意味 着 它们 会 将 值 发 送 到 管线 中 的 下 一 个 阶段 。 例 如 ， 
顶点 着 色 器 中 的 以 下 声明 将 指定 一 个 名 为 “color” 的 顶点 属性 ， 该 属性 输出 vec4 类 型 
的 值 : 


out vec4 color; 


没有 必要 为 顶点 位 置 声明 一 个 “out” 变 量 ， 因 为 OpenGL 有 一 个 内 置 的 vec4 变量 用 于 
此 目的 , 它 的 名 字 叫 作 gl Position. 在 顶点 着 色 器 ] PTT 
中 ， 我 们 将 矩阵 变换 应 用 于 传 入 的 顶点 〈 之 前 声 
明 为 位 置 的 顶点 )， 并 将 结果 赋值 给 gl Position: 


gl Position = proj matrix * mv _ matrix * position; 


然后 ， 变 换 后 的 顶点 将 自动 输出 到 光栅 着 色 
器 ， 最 终 将 相应 的 像素 位 置 发 送 到 片段 着 色 器 。 
光栅 化 过 程 如 图 4.2 所 示 。 在 glDrawArrays() | I 
函数 中 指定 GL_TRIANGLES 时 ， 光 栅 化 是 逐个 图 4.2 顶点 的 光栅 化 
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三 角形 完成 的 。 首 先 沿 着 连接 顶点 的 线 开始 插值 ， 其 精度 级 别 和 像素 显示 密度 相关 。 然 后 
通过 沿 连接 边缘 像素 的 水 平 线 插值 来 填充 三 角形 的 内 部 空间 中 的 像素 。 
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YEA 3D 对 象 的 一 个 基础 步骤 是 创建 适当 的 变换 矩阵 并 将 它们 发 送 到 统一 变量 ， 就 像 我 
们 在 4.2 节 中 所 做 的 那样 。 我 们 首先 定义 3 个 矩阵 : 


o 一 个 模型 矩阵 ; 
o 一 个 视图 和 矩阵; 
@ ”一 个 透视 矩阵 。 


模型 矩阵 在 世界 坐标 空间 中 表示 对 象 的 位 置 和 朝向 。 每 个 模型 都 有 自己 的 模型 矩阵 ， 如 
果 模 型 移动 ， 则 需要 不 断 重 建 该 矩阵 。 

视图 抢 阵 移动 并 旋转 世界 中 的 模型 ， 以 模拟 相机 在 所 需 位置 的 效果 。 回 忆 一 下 第 2 章 ， 
OpenGL 相机 存在 于 位 置 (0,0,0) 并 且 面 向 负 Z 轴 。 为 了 模拟 以 某 种 方式 移动 的 相机 的 表现 ， 
我 们 需要 向 相反 的 方向 移动 物体 本 身 。 例 如 ， 将 摄像 机 向 右 移动 会 导致 场景 中 的 物体 看 起 
来 像 是 向 左 移动 :虽然 OpenGL 相机 是 固定 的 ， 但 我 们 可 以 通过 把 对 象 向 左 移动 的 方式 ， 
让 摄像 机 看 起 来 向 右 移动 了 。 

透视 矩阵 是 一 种 变换 ， 它 根据 所 需 的 视 锥 提供 3D 效果 ， 如 前 面 第 3 章 所 述 。 

了 解 何 时 计算 每 种 类 型 的 矩阵 也 很 重要 。 永远 不 会 改变 的 和 矩阵 可 以 在 init0 中 构建 , 但 那 
些 会 改变 的 矩阵 需要 在 display0 中 构建 ， 以 便 为 每 个 帧 重建 它们 。 我 们 假设 模型 是 动画 的 ， 
相机 是 可 移动 的 ， 那 么 : 

@ 需要 为 每 个 模型 和 每 个 帧 都 创建 模型 矩阵 ; 

@ 视图 矩阵 需要 每 帧 创建 一 次 〈 因 为 相机 可 以 移动 )， 但 是 对 于 在 这 一 帧 期 间 演 染 的 

所 有 对 象 ， 它 都 是 一 样 的 ; 
o 透视 矩阵 只 需要 创建 一 次 [在 init0 中 ]， 它 需要 使 用 屏幕 窗口 的 宽度 和 高 度 〈 以 及 
所 需 的 视 锥 体 参 数 )， 除 非 调 整 窗口 大 小 ， 否 则 它 通 常 保持 不 变 。 

然后 在 display0) 函 数 中 生成 模型 和 视图 转换 矩阵 ， 如 下 所 示 。 

(1) 根据 所 需 的 摄像 机 位 置 和 朝向 构建 视图 矩阵 。 

(2) 对 于 每 个 模型 ， 进 行 以 下 操作 。 

i， 根 据 模 型 的 位 置 和 朝向 构建 模型 矩阵 。 
ii.， 将 模型 和 视图 矩阵 结合 成 单个 “MV” 和 矩阵 。 
ii. K MV 和 投影 矩阵 发 送 到 相应 的 着 色 器 统一 变量 。 

从 技术 上 讲 ， 没 有 必要 将 模型 和 视图 矩阵 合并 成 一 个 矩阵 。 也 就 是 说 ， 它 们 也 可 以 用 
单独 分 开 的 矩阵 的 形式 发 送 给 顶点 着 色 器 。 然 而 ， 将 它们 合并 ， 并 保持 透视 矩阵 分 离 ， 
有 一 些 优 点 。 例 如 ， 在 顶点 着 色 器 中 ， 模 型 中 的 每 个 顶点 都 需要 乘 以 矩阵 。 由 于 复杂 的 
模型 可 能 有 数 百 甚至 数 千 个 项 点， 因此 可 以 通过 在 将 模型 和 视图 矩阵 发 送 到 顶点 着 色 器 
之 前 预先 相 乘 一 次 来 提高 性 能 。 稍 后 ， 我 们 将 看 到 为 什么 需要 将 透视 矩阵 分 开 以 用 于 光 
照 的 目的 。 
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是 时 候 将 所 有 部 分 组 合 在 一 起 了 ! 为 了 构建 一 个 完整 的 C+HOpenGL/GLSL 系统 并 在 3D 
“世界 ”中 泻 染 我 们 的 立方 体 ， 到 目前 为 止 介绍 过 的 所 有 机 制 都 需要 被 整合 在 一 起 ， 并 完美 
协调 。 我 们 可 以 重用 我 们 之 前 在 第 2 章 中 看 到 的 一 些 代码 。 具 体 来 说 ， 我 们 不 会 再 重复 讲 
解 以 下 这 些 用 来 读 取 包 含 着 色 器 代码 的 文件 ， 编 译 和 链接 它们 ， 以 及 检测 GLSL 错误 的 函 
数 ， 事 实 上 ， 回 想 一 下 ， 我 们 已 将 它们 移 到 “Utils.cpp” 文 件 中 : 
createShaderProgram() 
readShaderSource () 
checkOpenGLError () 


printProgramLog() 
printShaderLog() 


在 给 定 了 了 了 轴 的 指定 视 场 角 、 屏 幕 纵横 比 以 及 所 需 的 近 、 远 前 裁 平 面 〈 在 4.9 节 中 讨论 
了 如 何 为 近 剪 裁 平面 和 远 剪 裁 平 面 选择 适当 的 值 ) 的 情况 下 ， 我 们 还 需要 一 个 构建 透视 矩 
阵 的 工具 函数 。 虽 然 我 们 可 以 自己 轻松 编写 这 样 的 函数 ， 但 GLM 已 经 包含 了 一 个 : 


glm::perspective(<field of view>, <aspect ratio>, <near plane>, <far plane>); 
我 们 现在 可 以 构建 完整 的 3D 立方 体 程 序 了 ， 如 下 面 的 程序 4.1 所 示 。 
程序 4.1 简单 的 红色 立方 体 


C++/OpenGL 应 用 程序 


#include <GL\glew.h> 

#include <GLFW\glfw3.h> 
#include <string> 

#include <iostream> 

#include <fstream> 

#include <cmath> 

#include <glm\glm.hpp> 

#include <glm\gtc\type ptr.hpp> 
#include <glm\gtc\matrix transform.hpp> 
#include "Utils.h" 

using namespace std; 





#define numVAOs 1 
#define numVBOs 2 


float cameraX, cameraY, cameraZ; 
float cubeLocX, cubeLocY, cubeLocZ; 
GLuint renderingProgram; 

GLuint vao[numVAOs] ; 

GLuint vbo[numVBOs] ; 


// 分 配 在 display () 函数 中 使 用 的 变量 空间 ， 这 样 它们 就 不 必 在 泻 染 过 程 中 分 配 
GLuint mvLoc, projLoc; 

int width, height; 

float aspect; 

glm::mat4 pMat, vMat, mMat, mvMat; 
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void setupVertices (void) { // 36 个 顶点 ，12 个 三 角形 ， 组 成 了 放置 在 原点 处 的 2X2X 2 立方 体 

float vertexPositions[108] = { 
-a0fr 10i 1008, sO0Fr 10E; LOE 1.0f, —1.0f, ~L08, 
1.08, -LUE -1.0£, 10E; 1.06, =1.0€, 1,08, 2.0f, <1,.0£, 
1.0£, =10£, -1.0£, 1.0£, -1.0f, 1.0£, 1.0f, 1.0f, =<1.0f, 
1.0f,--1.0£, 1,0f, 1. 0f,.1.0£,,1,0f, 1.0£, 1.0f; .-1.0£, 
1.0f; -1.0£; T0f, -L.0f, -120£, 1:0£,. Ts0f, 1.0f, 1L.DE; 
=} OF, ~1,. 08; LOE 0 2. 08; 1.08, 1.08, L.0F,:1..0£,. 
=1..0f,..-1,08, 1.0£, -J.0£,,<1,08, ~1.0€, .-1.0£, 1/08, 1.0£, 
“1.05; vir “LOr =1.0f; TOF, Slt =1.0£, 1.0£; 1.0L, 
=1.0f) ID TOE LOrE. LOE et 1.0f, -1.0£, -1.0£, 
1:0f; -1.0f,. -1.0£,.-1.0£; -1,0f,. -1.0£, ~L.0f, <1.0£, 1,0f, 
=1.0£, 108, =1.0£, 1.0f, 1.0£,+=1.0£, 1:05, T.0f, 1.08; 
1.08, 1.0£, 1.0£,. ~1.0£, 1,08, 1.0£,. =1.0£, 1.0f, =1.0£ 

}; 

glGenVertexArrays (1, vao); 

glBindVertexArray(vao[0]); 

glGenBuffers (numVBOs, vbo); 


glBindBuffer(GL_ARRAY BUFFER, vbo[0]); 
glBufferData(GL_ARRAY BUFFER, sizeof (vertexPositions), vertexPositions, GL_STATIC_DRAW) ; 


void init (GLFWwindow* window) { 
renderingProgram = Utils::createShaderProgram("vertShader.glsl", "fragShader.glsl"); 
cameraX = 0.0f; cameraY = 0.0f; cameraZ = 8.0f; 
cubeLocX = 0.0f; cubeLocY = -2.0f; cubeLocZ = 0.0f; // 沿 Y 轴 下 移 以 展示 透视 
setupVertices(); 


void display (GLFWwindow* window, double currentTime) { 
glClear (GL DEPTH BUFFER BIT); 
glUseProgram(renderingProgram) ; 


// 获取 MV 矩阵 和 投影 矩阵 的 统一 变量 
mvLoc = glGetUniformLocation(renderingProgram, "mv_matrix"); 
projLoc = glGetUniformLocation(renderingProgram, "proj matrix"); 


// 构建 透视 矩阵 

glfwGetFramebufferSize(window, &width, &height); 

aspect = (float)width / (float)height; 

pMat = glm::perspective(1.0472f, aspect, 0.1f, 1000.0f); // 1.0472 radians = 60 degrees 


// 构建 视图 矩阵 、 模 型 矩阵 和 视图 -模型 矩阵 

vMat = glm::translate(glm::mat4(1.0f), glm::vec3(-cameraX, -cameraY, -cameraZ)); 
mMat glm::translate(glm::mat4(1.0f), glm::vec3(cubeLocX, cubeLocY, cubeLoc2) ); 
mvMat = vMat * mMat; 


ii 


// 将 透视 矩阵 和 MV 矩阵 复制 给 相应 的 统一 变量 
glUniformMatrix4fv(mvLoc, 1, GL FALSE, glm::value ptr(mvMat)); 
glUniformMatrix4fv(projLoc, 1, GL FALSE, glm::value ptr (pMat)); 


// 将 VBO 关联 给 顶点 着 色 器 中 相应 的 顶点 属性 
glBindBuffer(GL_ARRAY_BUFFER, vbo[0]); 
glVertexAttribPointer(0, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0) ; 


// 调整 openGL 设置 ， 绘 制 模型 
glEnable (GL DEPTH TEST) ; 
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glDepthFunc (GL_LEQUAL) ; 
glDrawArrays(GL_ TRIANGLES, 0, 36); 
} 


int main(void) { // main() 和 之 前 的 没有 变化 

if (!glfwInit()) { exit(EXIT_FAILURE); } 
glfwWindowHint (GLFW_CONTEXT VERSION MAJOR, 4); 
glfwWindowHint (GLFW_CONTEXT_VERSION MINOR, = 8 
GLFWwindow* window = glfwCreateWindow(600, 600, "Chapter 4 - program 1", NULL, NULL); 
glfwMakeContextCurrent (window) ; 
if (glewInit() != GLEW_OK) { exit (EXIT_FAILURE) ; } 
glfwSwapInterval (1); 


init (window) ; 


while (!glfwWindowShouldClose(window)) { 
display (window, glfwGetTime()); 
glfwSwapBuffers (window) ; 
glfwPollEvents(); 

} 

glfwDestroyWindow (window) ; 

glfwTerminate() ; 

exit (EXIT_SUCCESS) ; 

} 


顶点 着 色 器 (文件 名 :“vertshader.gls1”) 
#version 430 
layout (location=0) in vec3 position; 


uniform mat4 mv matrix; 
uniform mat4 proj matrix; 


void main(void) 
{ gl_Position = proj matrix * mv_matrix * vec4(position,1.0); 


} 

片段 着 色 器 (文件 名 ;“fragshader.gls1”) 
#version 430 

out vec4 color; 


uniform mat4 mv matrix; 
uniform mat4 proj matrix; 


void main(void) 
{ color = vec4(1.0, 0.0, 0.0, 1.0); 
} 


程序 4.1 的 输出 如 图 4.3 所 示 ( 见 彩 插 )。 让 我 们 仔细 看 看 程序 4.1 中 的 代码 。 重 要 的 是 ， 
我 们 要 了 解 所 有 部 分 的 工作 原理 以 及 它们 如 何 协同 工作 。 

下 面 查 看 由 init0) 调 用 的 函数 setupVertices()。 在 此 函数 的 开头 ， 声 明 一 个 名 为 
vertexPositions 的 数组 ,， 其 中 包含 36 个 组 成 立方 体 的 顶点 。 首先 你 可 能 想 知 道 为 什么 这 个 立 
HEA 36 个 顶点 ， 四 辑 上 一 个 立方 体 应 该 只 需要 8 个 顶点 。 答 案 是 我 们 需要 用 三 角形 来 构 
建 我 们 的 立方 体 ， 因 此 6 个 立方 体面 中 的 每 一 个 都 需要 由 两 个 三 角形 构成 ， 总 共 6X2=12 


50 第 4 章 管理 3D 图 形 数据 
个 三 角形 ( 见 图 4.4)。 由 于 每 个 三 角形 由 3 个 顶点 指定 ， 因 此 总 共有 36 个 顶点 。 由 于 每 个 


顶点 具有 3 个 值 (x,y,z)， 因 此 数组 中 总 共有 36X3=108 MH. 确实 ,每 个 顶点 都 参与 了 多 个 
三 角形 的 组 成 ， 但 我 们 仍然 分 别 指定 每 个 顶点 ， 因 为 现在 我 们 会 将 每 个 三 角形 的 顶点 分 别 


发 送 到 管线 。 





图 4.3 程序 4.1 的 输出 。 从 (0,0,8) 看 图 4.4 由 三 角形 组 成 的 立方 体 
位 于 (0,-2,0) 的 红色 立方 体 

立方 体 在 它 自己 的 坐标 系 中 定义 ， 中 心 为 (0,0.0)， 它 的 角 在 系 了 和 2Z 这 3 条 轴 上 分 别 
位 于 -1.0 一 +1.0。setupVertices() 的 其 余部 分 建立 了 VAO 和 两 个 VBO (尽管 只 使 用 了 一 个 ) 
并 将 立方 体 顶 点 加 载 到 第 0 个 VBO 缓冲 区 中 。 

请 注意 ，initO 函 数 负责 执行 只 需要 执行 一 次 的 任务 : 读 取 着 色 器 代码 并 构建 泻 染 程序 ， 
并 将 立方 体 顶 点 加 载 到 VBO 中 [通过 调用 setupVertices()]。 请 注意 ， 它 还 给 定 了 立方 体 和 相 
机 在 世界 中 的 位 置 。 稍 后 我 们 将 为 立方 体 设 置 动画 ， 并 了 解 如 何 移动 相机 ， 到 那个 时 候 我 
们 可 能 需要 去 除 这 个 固定 的 位 置 。 

现在 让 我 们 看 一 下 display() 函 数 。 回 想 一 下 ，display(O) 可 以 被 重复 调用 ， 并 且 调 用 它 的 
速率 被 称 为 帧 率 。 也 就 是 说 ， 通 过 不 断 地 快速 绘制 和 重 绘 场景 或 帧 ， 就 可 以 实现 动画 。 通 
常 需要 在 泻 染 帧 之 前 清除 深度 缓冲 区 ， 以 便 正 确 地 进行 隐藏 面 消除 〈 不 清除 深度 缓冲 区 有 
时 会 导致 每 个 曲面 都 被 移 除 ， 从 而 导致 完全 黑屏 )。 默 认 情 况 下 ，OpenGL 中 的 深度 值 范围 
为 0.0~1.0. HM glClear(GL_DEPTH BUFFER_BIT) 就 可 以 清除 深度 缓冲 区 ， 这 会 使 用 默 
认 值 〈 通 常 为 1.0) 来 填充 深度 缓冲 区 。 

接 下 来 ，display0 通 过 调用 glUseProgram() 来 启用 着 色 器 ， 在 GPU 上 安装 GLSL 代码 。 
回想 一 下 ， 这 并 不 会 运行 着 色 器 程序 ， 但 它 会 让 后 续 的 OpenGL 调用 能 够 确定 着 色 器 的 顶 
点 属性 和 统一 变量 位 置 。displayO) 函 数 接 下 来 获取 统一 变量 位 置 ， 构 建 透 视 、 视 图 和 模型 矩 
阵 "， 将 视图 和 模型 矩阵 结合 成 单一 的 MV EBE, JERALA MV 矩阵 赋值 给 它们 相应 的 统 
一 变量 。 在 这 里 ， 值 得 注意 的 是 对 translate() 函 数 的 GLM 调用 的 形式 : 





© 精明 的 读者 可 能 会 注意 到 ， 并 不 需要 每 次 调用 display0 时 都 构建 透视 矩阵 ， 因 为 它 的 值 不 会 改变 。 这 在 一 部 分 情况 下 是 正 
确 的 一 一 如 果 用 户 在 程序 运行 时 调整 窗口 大 小 ， 则 需要 重新 计算 透视 和 矩阵。 在 4.11 节 中 ， 我 们 将 更 有 效 地 处 理 这 种 情况 ， 并 且 
在 此 过 程 中 ， 我 们 会 将 透视 矩阵 的 计算 从 display() 移 到 init() 函 数 。 
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vMat = glm::translate(glm::mat4(1.0f), glm::vec3(-cameraX, -cameraY, -cameraZ) ); 


看 起 来 有 点 神秘 的 调用 通过 以 下 方式 构建 了 一 个 变换 矩阵 : 从 单位 矩阵 开始 〈 使 用 
glm::mat4(1.0 人 构造 函数 ) 和 以 向 量 的 形式 指定 变换 值 ( 使 用 glm::vec3(x,y,z) 构 造 函 数 )。 许 
多 GLM 变换 操作 使 用 这 种 方法 。 

接 下 来 ，display() 函 数 启用 了 包含 立方 体 顶 点 数据 的 缓冲 区 ， 并 将 其 附加 到 第 0 个 顶点 
属性 ， 以 准备 将 顶点 数据 发 送 到 着 色 器 。 

display() 函 数 做 的 最 后 一 件 事 是 通过 调用 glDrawArrays() 来 绘制 模型 , 指定 模型 由 三 角形 
组 成 并 且 总 共有 36 个 顶点 。 对 glDrawArrays() 的 调用 通常 在 其 他 调整 这 个 模型 的 演 染 设置 
的 命令 之 前 。" 在 这 个 例子 中 ， 有 两 个 这 样 的 命令 ， 这 两 个 命令 都 与 深度 测试 相关 。 回 忆 一 
下 第 2 章 ，OpenGL 使 用 深度 测试 来 进行 隐藏 面 消除 。 在 这 里 ， 我 们 启用 深度 测试 并 指定 希 
望 OpenGL 使 用 的 特定 深度 测试 。 此 处 显示 的 设置 对 应 第 2 章 中 的 说 明 ; 在 本 书 的 后 续 内 
容 中 ， 我 们 将 看 到 这 些 命令 的 其 他 用 途 。 

最 后 ， 说 一 说 着 色 器 。 首 先 ， 请 注意 它们 都 包含 相同 的 统一 变量 声明 块 。 虽 然 并 不 总 是 
一 定 要 这 样 做 ， 但 在 特定 泻 染 程序 中 的 所 有 着 色 器 中 包含 相同 的 统一 变量 声明 块 通常 是 一 
种 好 习惯 。 

还 要 注意 ， 顶 点 着 色 器 中 传 入 的 顶点 属性 的 position 变量 上 是 否 存 在 layout 修饰 符 。 由 
于 它 的 位 置 被 指定 为 “0”， 因此 displayO 函 数 可 以 简单 地 通过 在 glVertexAttribPointer() 函 数 
调用 的 第 一 个 参数 和 gLEnableVertexAttribArray() 函 数 调用 中 使 用 0 来 引用 此 变量 。 请 注意 ， 
position 顶点 属性 被 声明 为 vec3 类 型 ， 因 此 需要 将 其 转换 为 vec4 类 型 ， 以 便 与 将 要 用 它 乘 
以 的 4X4 矩阵 兼容 。 这 个 转换 是 用 vec4(position,1.0) 完 成 的 ， 它 用 名 为 “position” 的 变量 
构建 一 个 vec4， 在 新 添加 的 第 四 个 点 中 放置 一 个 值 1.0。 

顶点 着 色 器 中 的 乘法 将 矩阵 变换 应 用 于 顶点 ， 将 其 转换 为 相机 空间 〈 请 注意 从 右 到 左 的 
结合 顺序 )。 这 些 值 被 放 入 内 置 的 OpenGL 输出 变量 gl Position 中 ， 然 后 继续 通过 管线 并 由 
光栅 着 色 器 进行 插值 。 

然后 插值 后 的 像素 位 置 ( 称 为 片段 ) 被 发 送 到 片段 着 色 器 (Fragment Shader)。 回 想 一 下 ， 
片段 着 色 器 的 主要 目的 是 设置 输出 像素 的 颜色 。 以 类 似 于 顶点 着 色 器 的 方式 ， 片 段 着 色 器 逐 
个 处 理 像 素 ， 并 为 每 个 像素 单独 调用 。 在 我 们 的 例子 中 ， 它 固定 地 输出 对 应 于 红色 的 值 。 由 
于 前 面 指出 的 原因 ， 统 一 变量 已 包含 在 片段 着 色 器 中 ， 即 使 它们 在 此 示例 中 并 未 被 使 用 。 

4.5 展示 了 从 C++HOpenGL 应 用 程序 开始 并 通过 管线 的 数据 流 概况 。 

让 我 们 对 着 色 器 进行 一 些 轻微 的 修改 。 特 别 是 ， 我 们 将 根据 每 个 顶点 的 位 置 为 每 个 顶点 
指定 一 种 颜色 ， 并 将 该 颜色 放 在 输出 的 顶点 属性 varyingColor 中 。 同 样 ， 修 改 片 段 着 色 器 以 
接收 传 入 的 颜色 〈 由 光栅 着 色 器 插值 ) 并 使 用 它 来 设置 输出 像素 的 颜色 。 请 注意 ， 代 码 中 
也 将 位 置 乘 以 12， 然 后 加 1/2， 以 将 取 值 范围 从 [-1…+1] 转 换 为 [0…1]。 还 要 注意 的 是 ， 通 
常 约定 在 程序 员 定 义 的 插值 顶点 属性 变量 名 称 中 包含 单词 “varying”。 每 个 着 色 器 中 的 更 改 
都 被 高 亮 了 ， 结 果 如 下 所 示 。 


O 通常 ， 这 些 调用 可 以 放 在 init0 而 不 是 display0 中 。 但 是 ， 在 绘制 具有 不 同属 性 的 多 个 对 象 时 ， 必 须 将 其 中 一 个 或 多 个 放 在 
display() 中 。 为 简单 起 见 ， 我 们 总 是 将 它们 放 在 display0 〇 中 。 
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图 4.5 程序 4.1 的 数据 流 
修改 后 的 顶点 着 色 器 : 
#version 430 


layout (location=0) in vec3 position; 
uniform mat4 mv matrix; 


uniform mat4 proj matrix; 
out vec4 varyingColor; 


void main(void 


{ gl Position = proj matrix * mv_matrix * vec4(position,1.0); 


varyingColor = vec4(position,1.0) * 0.5 + vec4(0.5, 0.5, 0.5, 0.5); 


修改 后 的 片段 者 色 器 : 
#version 430 
in vec4 varyingColor; 


out vec4 color; 
uniform mat4 mv_matrix; 


uniform mat4 proj matrix; 


void main(void) 

{ color = varyingColor; 

请 注意 ， 因 为 颜色 是 从 顶点 着 色 器 在 顶点 
属性 (varyingColor) 中 发 出 的 ， 所 以 它们 也 由 
光栅 着 色 器 进行 插值 ! 它 的 效果 可 以 在 图 4.6 
( 见 彩 插 ) 中 看 到 ， 从 一 个 角 到 另 一 个 角 的 颜色 
在 整个 立方 体 中 明显 是 被 插值 了 。 

另 请 注意 ， 顶 点 着 色 器 中 的 “out” 变 量 
varyingColor 也 是 片段 着 色 器 中 的 “in” 变 量 。 
两 个 着 色 器 知道 顶点 着 色 器 中 的 哪个 变量 提供 
片段 着 色 器 中 的 哪个 变量 ， 因 为 它们 在 两 个 着 
色 器 中 具有 相同 的 名 称 “varyingColor ”。 

由 于 我 们 的 main0 函 数 包 含 一 个 泻 染 循 图 4.6 有 插值 颜色 的 立方 体 
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环 ， 我 们 可 以 像 在 程序 2.6 中 那样 为 我 们 的 立方 体 设置 动画 ， 方 法 是 使 用 基于 时 间 变 化 的 
平移 和 旋转 来 构建 模型 矩阵 。 例 如 ， 程 序 4.1 中 display0 函 数 中 的 代码 可 以 修改 如 下 【〈 突 
出 显示 更 改 ): 


glClear(GL DEPTH BUFFER BIT); 
glClear (GL COLOR BUFFER_BIT); 


// 使 用 当前 时 间 来 计算 x，y 和 z 的 不 同 变换 
tMat = glm::translate(glm::mat4(1.0f), 
glm: :vec3 (sin(0.35f*currentTime)*2.0f, cos(0,52f*currentTime)*2.0f, sin(0.7f*currentTime)*2.0f)); 
rMat = glm::rotate(glm::mat4(1.0f), 1.75f*(float)currentTime, glm::vec3(0.0f, 1.0f, 0.0f)); 
rMat = glm::rotate(rMat, 1.75f*(float)currentTime, glm::vec3(1.0f, 0.0f, 0.0£)); 
rMat = glm::rotate(rMat, 1.75f*(float)currentTime, glm::vec3(0.0f, 0.0f, 1.0f)); 
/ 用 1.75 来 调整 旋转 速度 


mMat = tMat * rMat; 


在 模型 矩阵 中 使 用 当前 时 间 〈 以 及 各 种 三 角 函 数 ) 会 使 立方 体 看 起 来 在 空间 中 翻滚 。 请 
注意 , 添加 此 动画 说 明了 每 次 通过 display() 清 除 深 度 绥 冲 区 以 确保 正确 进行 隐藏 面 消除 的 重 
要 性 。 如 图 4.6 所 示 ， 它 还 需要 清除 颜色 缓冲 区 ; 否则， 立方 体会 在 移动 时 留 下 痕迹 。 

translate() 和 rotate0) 函 数 是 GLM 库 的 一 部 分 。 另 外 ， 请 注意 最 后 一 行 中 的 算 阵 乘法 一 一 
操作 中 tMat 和 rMat 的 顺序 很 重要 。 它 计算 两 个 变换 的 结合 , 平移 放 在 左边 , 旋转 放 在 右边 。 
当 顶 点 随后 乘 以 此 矩阵 时 ， 计 算 从 右 到 左 进行 ， 这 意味 着 首先 完成 旋转 ， 然 后 才 是 平移 。 
变换 的 应 用 顺序 很 重要 ， 改 变 顺序 会 导致 不 同 的 行为 。 图 4.7 显示 了 为 立方 体 设 置 了 动画 后 


显示 的 一 些 帧 。 





图 4.7 为 3D 立方 体 设置 动画 〈“ 翻 滚 ”) 
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现在 将 我 们 学 到 的 知识 扩展 到 泻 染 多 个 对 象 。 在 我 们 解决 在 单个 场景 中 演 染 多 种 不 同 的 
模型 的 常见 情况 之 前 ， 让 我 们 先 考 虑 更 简单 的 情形 一 一 同一 模型 多 次 出 现 。 例如， 假设 我 们 
希望 扩展 前 面 的 示例 ， 以 便 呈 现 “ 一 大 群 ”(24 个 ) 翻滚 的 立方 体 。 我 们 可 以 将 display0O) 函 
数 中 构建 MV 矩阵 并 绘制 立方 体 的 代码 (如 下 所 示 突 出 显示 部 分 )， 移 动 到 一 个 执行 24 次 
的 循环 中 来 完成 此 操作 。 我 们 利用 循环 变量 来 计算 立方 体 的 旋转 和 平移 人 参数， 以便 每 次 绘 
制 立 方 体 时 ， 都 会 构建 不 同 的 模型 矩阵 。( 我 们 还 将 摄像 机 放置 在 正 Z 轴 的 下 方 ， 这 样 我 们 
就 可 以 看 到 所 有 的 立方 体 。) 图 4.8 显示 了 一 帧 由 此 产生 的 动画 场景 。 
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void display(GLFWwindow* window, double currentTime) { 


for (1-0; i<24; J++) 
{ tf = currentTime + i; // tf == "time factor (时间 因 子 ) "， 声 明 为 浮 点 类 型 
tMat = glm::translate(glm::mat4(1.0f), glm::vec3(sin(.35f*t£)*8.0f, cos(.52f*t£)*8.0f, 
sin(.70f£#i#) *8.0f) ); 
rMat = glm::rotate(glm::mat4(1.0f), 1.75f*tf, glm::vec3(0.0f, 1.0f, 0.0f)) 
rMat = glm::rotate(rMat, 1.75f*tf, glm::vec3(1.0f, 0.0f, 0.0f)); 
rMat = glm::rotate(rMat, 1.75f*tf, glm::vec3(0.0f, 0.0f, 1.0f)); 
mMat = tMat * rMat; 
mvMat = vMat * mMat; 


glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value_ptr(mvMat) ); 
glUniformMatrix4fv(projLoc, 1, GL FALSE, glm::value_ptr(pMat)); 


glBindBuffer (GL ARRAY BUFFER, vbo[0]); 
glVertexAttribPointer(0, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0); 


glEnable (GL DEPTH TEST); 
glDepthFunc (GL_LEQUAL) ; 
glDrawArrays (GL TRIANGLES, 0, 36); 








图 4.8 ”多 个 翻滚 的 立方 体 


实例 化 


实例 化 (Instancing) 提供 了 一 种 机 制 ， 可 以 只 用 一 个 C++/OpenGL 调用 就 告诉 显卡 演 染 
Wri 这 可 以 带 来 显著 的 性 能 好 处 ， 特 别 是 当 有 数 千 甚至 数 百 万 的 对 象 被 

会 制 时 一 一 例如 泻 染 在 场地 中 的 许多 花 条 的 时 候 。 

我 们 首先 将 我 们 的 C++/OpenGL 应 用 程序 中 的 mh 用 改 为 glDrawArrays- 
Instanced()。 这 样 ， 我 们 就 可 以 要 求 OpenGL 绘制 尽 可 能 多 的 副本 。 我 们 可 以 指定 绘制 如 下 
24 个 立方 体 : 


glDrawArraysInstanced (GL TRIANGLES, 0, 36, 24); 


使 用 实例 化 时 ， 顶 点 着 色 器 可 以 访问 内 置 变量 gL_InstanceID， 这 是 一 个 整数 ， 指 向 当前 
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正在 处 理 对 象 的 第 几 个 实例 。 

为 了 使 用 实例 化 来 重复 我 们 以 前 的 翻滚 立方 体 示例 , 我们 需要 将 构建 不 同 模 型 矩阵 的 计 
算 [先前 在 display() 中 的 循环 内 实现 ] 移 动 到 顶点 着 色 器 中 。 由 于 GLSL 不 提供 平移 或 旋转 函 
数 ， 并 且 我 们 无 法 从 着 色 器 内 部 调用 GLM， 因 此 我 们 需要 使 用 程序 3.1 中 的 工具 函数 。 我 
们 还 需要 将 C++/OpenGL 应 用 程序 中 的 “时 间 因 子 ” 通 过 统一 变量 传递 给 顶点 着 色 器 。 我 
们 还 需要 将 模型 和 视图 矩阵 传递 到 单独 的 统一 变量 中 ， 因 为 对 每 个 立方 体 的 模型 矩阵 都 需 
要 进行 旋转 计算 。 我 们 对 代码 的 修改 ， 包 括 C+HOpenGL 应 用 程序 中 的 修改 以 及 新 的 顶点 
着 色 器 中 的 修改 ， 如 程序 4.2 所 示 。 


程序 4.2 ”实例 化 一 一 24 个 动画 立方 体 
项 点 着 色 器 : 


#version 430 
layout (location=0) in vec3 position; 


uniform mat4 m matrix; // 这 些 是 分 开 的 模型 和 视图 矩阵 
uniform mat4 v_matrix; 
uniform mat4 proj matrix; 


uniform float tf; // 用 于 动画 和 放置 立方 体 的 时 间 因 子 
out vec4 varyingColor; 


mat4 buildRotateX (float rad); // 矩阵 变换 工具 函数 的 声明 
mat4 buildRotateY(float rad); // GLSL 要 求 函数 先 声明 后 调用 
mat4 buildRotateZ(float rad); 

mat4 buildTranslate(float x, float y, float z); 


void main(void) 

float i=gl_InstanceID + tf; // 取 值 基于 时 间 因 子 ， 但 是 对 每 个 立方 体 示例 也 都 是 不 同 的 
float a = sin(2.0* i) * 8.0; // 这 些 是 用 来 平移 的 x、y、z 分 量 

float b = sin(3.0 * i) * 8.0; 

float c = sin(4.0 * i) * 8.0; 


// 构建 旋转 和 平移 矩阵 ， 将 会 应 用 于 当前 立方 体 的 模型 矩阵 
mat4 localRotX = buildRotatex(1000*i); 

mat4 localRotY = buildRotateY(1000*i) ; 

mat4 localRotZ = buildRotateZ(1000*i) ; 

mat4 localTrans = buildTranslate(a,b,c); 


// 构建 模型 和 矩阵， 然后 是 模型 -视图 矩阵 
mat4 newM matrix = m matrix * localTrans * localRotX * localRotY * localRot2; 
mat4 mv_matrix = v_matrix * newM matrix; 


gl_Position = proj matrix * mv matrix * vec4(position,1.0); 
varyingColor = vec4(position,1.0) * 0.5 + vec4(0.5, 0.5, 0.5, 0.5); 
} 


// 构建 平移 矩阵 的 工具 函数 (来 自 第 3 章 ) 

mat4 buildTranslate(float x, float y, float z) 

{ mat4 trans = mat4(1.0, 0.0, 0.0, 0.0, 
0.0, 1.0, 0.0, 0.0, 
030,- 0:07 1.05 020} 
a 

return trans; 
} 
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// 用 来 绕 X、Y、2 轴 旋 转 的 类 似 函 数 〈 也 来 自 第 3 章 ) 
C++/OpenGL 应 用 程序 (在 display () 函数 中 ) 


// 在 C++ 应 用 程序 中 不 再 需要 构建 MV 矩阵 
glUniformMatrix4fv(vLoc, 1, GL FALSE, glm::value ptr(vMat));  // 着 色 器 需要 视图 矩阵 的 统一 变量 





timeFactor = ((float)currentTime) ; // 为 了 获得 时 间 因 子 信息 
tfLoc = glGetUniformLocation(renderingProgram, "tf"); // 着 色 器 也 需要 它 ) 


glUniformlf(tfLoc, (float)timeFactor); 

glDrawArraysinstanded (GL TRIANGLES, 0, 36, 28); 

程序 4.2 的 输出 结果 与 前 一 个 示例 相同 ， 可 以 在 前 面 的 图 4.8 中 看 到 。 

实例 化 让 我 们 可 以 极 大 地 扩展 对 象 的 副本 数量 ; 在 这 个 例子 中 , 即使 对 于 很 普通 的 GPU， 
实现 100 000 个 立方 体 的 动画 仍然 是 可 行 的 。 对 代码 的 更 改 主要 是 一 些 常 量 的 修改 ， 是 为 了 
将 大 量 立方 体 进一步 分 散 开 ， 如 下 所 示 。 


顶点 着 色 器 如 下 : 


float a = sin(203.0 * i/8000.0) * 403.0; 
float b = cos(301.0 * i1/4001.0) * 401.0; 
float c = sin(400.0 * i/6003.0) * 405.0; 


C++/OpenGL 应 用 程序 如 下 : 


cameraZ = 420.0f; // 将 摄像 机 沿 着 2 轴 再 移 远 一 些 ， 以 看 到 更 多 的 立方 休 


glDrawArraysInstanced(GL_TRIANGLES, 0, 36, 100000); 


输出 结果 如 图 4.9 所 示 。 





图 4.9 实例 化 ;100 000 个 动画 立方 体 
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4.7 在 同一 个 场景 中 浑 染 多 个 不 同 模型 


要 在 单个 场景 中 泻 染 多 个 模型 , 一 种 简单 的 方法 是 为 每 个 模型 使 用 单独 的 缓冲 区 。 每 个 模 
型 都 需要 自己 的 模型 算 阵 , 这 样 我 们 就 需要 为 我 们 泻 染 的 每 个 模型 生成 一 个 新 的 模型 -视图 算 
阵 。 还 需要 为 每 个 模型 单独 调用 glDrawArrays()。 因 此 ， 我 们 需要 修改 init0 和 display) Až. 

另 一 个 考虑 因素 是 我 们 是 否 需 要 为 我 们 想 要 绘制 的 每 个 对 象 使 用 不 同 的 着 色 器 或 不 同 
的 演 染 程序 。 事 实证 明 ， 在 许多 情况 下 ， 我 们 可 以 为 我 们 绘制 的 各 种 对 象 使 用 相同 的 着 色 
器 《以 及 相同 的 泻 染 程序 )。 只 有 当 它 们 由 不 同 的 图 元 〈 例 如 线 而 不 是 三 角形 ) 组 成 ， 或 者 
涉及 复杂 的 照明 或 其 他 效果 的 时 候 ， 我 们 才 会 需要 为 各 种 对 象 使 用 不 同 的 泻 染 程序 。 目 前 
并 没有 这 么 复杂 ， 因 此 我 们 可 以 重用 相同 的 顶点 和 片段 着 色 器 ， 而 只 需 修改 我 们 的 
C++/OpenGL 应 用 程序 ， 以 便 在 调用 displayO 时 将 各 个 模型 发 送 给 管线 。 

让 我 们 继续 添加 一 个 简单 的 金字 塔 ， 这 样 我 们 的 场景 就 包括 一 个 立方 体 和 一 个 金字 塔 。 
程序 4.3 中 显示 了 对 代码 的 相关 修改 。 我 们 突出 显示 了 一 些 关 键 细 节 , 例如 当 我 们 指定 使 用 
这 个 还 是 那个 缓冲 区 的 地 方 ， 以 及 我 们 指定 模型 中 包含 的 顶点 数 的 地 方 。 注 意 ， 人 金字塔 由 6 
个 三 角形 组 成 一 一 侧面 4 个， 底面 2 个， 总共 6x3=18 个 顶点 。 

包含 立方 体 和 金字 塔 的 场景 显示 结果 如 图 4.10 所 示 。 


程序 4.3 ”立方 体 和 人 金字塔 


void setupVertices() { 
float cubePositions[108] = 
{ =1 08," 1208, QE ~Ll0f, “1 06; =160f, 1.0F,.-1.0£, —Is0f, 
1,0£, -1.0£; OE LOE TOE, =1.0£, <1.0£, 1.0£, <1.0f, 
.… 立方 体 项 点 网 数据 和 以 前 一 样 









// 金字 塔 有 18 个 顶点 ， 由 \6 个 三 角形 组 成 (侧面 4 个， 底面 2 个 ) 

float pyramidPositions\54] = 

NL OF 1\0£, -1.0f; 1.0£; -0.0£, 1.0f, 0.0, // 前 面 

-1.0f, -1.0f, 0.0f, 1.0f, 0.0f, // 右面 

, -1.0£, -1.0f, 0.0f, 1.0f, 0.0f, // ll 

, -1.0f, 1.0f, 0.0f, 1.0f, 0.0f, // A 

-1.0f, -1.0f, -1.Q£, 1.0f,\-1.0f, 1.0f, -1.0f£, -1.0f, 1.0f, // 底面 一 左前 一 半 
1.0f, -1.0f, 1.0£,\-1.0£, -¥.0f, -1.0f, 1.0f, -1.0f, -1.0f // 底面 一 右 后 一 半 



















glGenVertexArrays (numVAQs, vao)\ // 我 们 需要 至 少 1 个 VAO 
glBindVertexArray (vao[0]\; 

glGenBuffers(numVBOs, vbo\; // 我 人 需要 至 少 2 4 vBo 
glBindBuffer (GL ARRAY BUFFE 
glBufferData (GL ARRAY BUFFER, 


vbo{0]); 
sizeof (cubePositions), cubePositions, GL STATIC DRAW); 


glBindBuffer (GL ARRAY BUFFER, vbo[1]); 
glBufferData(GL_ARRAY BUFFER, sizeof (pyramidPositions), pyramidPositions, GL STATIC DRAW); 
} 


void display (GLFWwindow* window, double currentTime) { 


/7 像 之 前 一 样 清除 颜色 和 深度 缓冲 区 (此 处 省 略 ) 
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// 像 之 前 一 样 使 用 演 染 程序 并 获取 统一 变量 位 置 〈 此 处 省 略 ) 
// 像 之 前 一 样 计算 投影 矩阵 〈 此 处 省 略 ) 


// 只 计算 一 次 视图 和 矩阵， 用 于 两 个 对 象 





vMat = glm::translate(glm: :mat4(1.0f), glm::vec3(-cameraX, -cameraY, -camera2Z)); 
// 绘制 立方 体 ( 使 用 0 号 缓冲 区 )》 

mMat = glm::translate(glm: :mat4(1.0f), glm::vec3(cubeLocX, cubeLocY, cubeLocZ) ); 
mvMat = vMat * mMat; 

glUniformMatrix4fv(mvLoc, 1, GL FALSE, glm::value_ptr(mvMat) ) ; 
glUniformMatrix4fv(projLoc, 1, GL FALSE, glm::value ptr(pMat) ); 
glBindBuffer (GL ARRAY BUFFER, vbo[0]); 

glVertexAttribPointer(0, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0); 

glEnable (GL DEPTH TEST); 

glDepthFunc (GL LEQUAL); 

glDrawArrays(GL_TRIANGLES, 0, 36); 

// 绘制 金字 塔 〈 使 用 1 号 缓冲 区 ) 

mMat = glm::translate(glm::mat4(1.0f), glm::vec3(pyrLocX, pyrLocY, pyrLocZ 


mvMat = vMat * mMat; 


glUniformMatrix4fv(mvLoc, 1, GL FALSE, glm::value_ptr(mvMat) ); 
glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(pMat) ); 


glBindBuffer (GL ARRAY BUFFER, vbo[1]); 
glVertexAttribPointer(0, 3, GL_FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0) ; 


glEnable (GL DEPTH TEST) ; 
glDepthFunc (GL LEQUAL); 
glDrawArrays (GL TRIANGLES, 0, 18); 





图 4.10 3D 立方 体 和 金字塔 
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关于 程序 4.3 的 其 他 一 些 值得 注意 的 小 细节 如 下 所 示 。 

@ 需要 声明 变量 pyrLocX、pyrLocY 和 pyrLocZ， 然 后 在 initO0 中 将 它们 初始 化 为 所 需 
的 金字 塔 的 位 置 ， 就 像 对 立方 体位 置 所 做 的 那样 。 

@ 在 display0O 的 开始 构建 视图 和 矩阵 vVMat， 然 后 在 立方 体 和 金字 塔 的 模型 - 视 几 矩 阵 中 
都 用 到 。 

@ 顶点 和 片段 着 色 器 代码 被 省 略 了 一 一 它们 和 4.5 节 中 的 一 样 。 


4.8 FERRIER 


到 目前 为 上 上 ， 我 们 演 染 的 模型 都 是 由 一 组 顶点 构成 的 。 然 而 ， 实 际 上 我 们 通常 希望 通过 
组 装 较 小 的 简单 模型 来 构建 复杂 的 模型 。 例 如 ， 可 以 通过 分 别 绘制 头 部 、 身 体 、 腿 部 和 手 
臂 来 创建 “机 器 人 ”的 模型 ， 这 当中 每 个 部 件 都 是 一 个 单独 的 模型 。 以 这 种 方式 构建 的 对 
象 通 疝 称 为 分 层 模 型 。 构 建 分 层 模型 的 棘手 部 分 是 跟踪 所 有 模型 -视图 窍 阵 并 确保 它们 完美 
协调 一 一 售 则 机 器 人 可 能 会 散 成 几 块 ! 

分 层 模型 不 仅 可 用 于 构建 复杂 对 象 一 一 它们 还 可 以 用 来 生成 复杂 场景 。 例 如 ， 考 虑 一 下 
我 们 的 行星 地 球 围绕 太阳 旋转 的 方式 ， 以 及 月 球 围绕 地 球 旋转 的 方式 。 这 样 的 一 个 场景 如 
图 4.11 所 示 。 计 算 月 球 在 太空 中 的 实际 路 径 可 能 很 复杂 。 然 而 ， 如 果 我 们 能 够 组 合 代表 两 
条 简单 圆 形 路 径 的 变换 一 一 月 球 围绕 地 球 旋转 的 路 径 和 地 球 围绕 太阳 旋转 的 路 径 一 一 我 们 
就 能 避免 直接 计算 月 球 的 轨迹 。 








图 4.11 TERAM KARARKA KAT, ARa H) 


EKUE, RATE EA E 3 EH 7c PRE 0 MAUN, HEHE E — HEE I 
HERE. TE UNA T5 a BE) FEL AE AE AG ASE 7S a] SE A EB ISH) SP eT AIR ARS ADE 
使 得 变换 可 以 构建 在 其 他 变换 之 上 (或 者 从 其 他 变换 中 被 移 除 )。 

OpenGL 有 一 个 内 置 的 矩阵 堆栈 ， 但 作为 旧 的 固定 功能 〈 非 可 编程 ) 管线 的 一 部 分 ， 它 
早已 被 弃 用 "I。 但 是 ，C++ 标 准 模板 库 (STL)〉 有 一 个 名 为 “stack” 的 类 ， 通 过 使 用 它 构 
建 mat4 的 堆栈 ， 它 可 以 相对 简单 直接 地 当 作 抢 阵 堆栈 使 用 。 正 如 我 们 将 看 到 的 ， 复 杂 场 景 


QD 是 的 ， 我们 知道 月 球 并 不 沿 着 这 种 “垂直 ”轨道 绕 地 球 旋转 ， 而 是 围绕 地 球 绕 太 阳 旋 转 的 共 面 。 我 们 选择 这 个 轨道 使 我 们 
的 程序 执行 更 容易 理解 。 
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中 通常 需要 的 许多 模型 、 视 图 和 模型 -视图 矩阵 可 以 由 单个 stack<glm::mat4> 实 例 替换 。 

我 们 将 首先 检查 实例 化 和 使 用 C++ 推 栈 的 基本 命令 , 然后 使 用 一 个 堆栈 来 构建 复杂 的 动 
画 场 景 。 我 们 将 通过 以 下 方法 使 用 C++ 堆栈 类 。 

@ push): 在 堆栈 顶部 创建 一 个 新 的 条 目 。 我 们 通常 会 把 目前 在 堆栈 顶部 的 矩阵 复制 
一 份 ， 并 和 其 他 的 变换 结合 ， 然 后 再 利用 这 个 命令 把 新 的 矩阵 副本 推 入 堆栈 中 。 
pop): 移 除 〈 并 返回 ) 最 顶部 的 矩阵 。 
top): 在 不 移 除 的 情况 下 ， 返 回 扒 栈 最 顶部 矩阵 的 引用 。 
<stack>.top() *= rotate〈 构 建 旋 转 和 矩阵 的 参数 )。 Ra 
<stack>.top() *= scale 〈 构 建 缩放 矩阵 的 参数 )。 Cece 
<stack>.top() *= translate〈 构 建 平 移 矩 阵 的 参数 )。 

如 前 面 列 表 中 所 示 ,“*=” 运 算 符 在 mat4 中 被 重 载 ， 因 此 它 可 以 用 于 连接 矩阵 。 
此 ， 我 们 通常 将 它 用 于 向 矩阵 堆栈 顶部 的 矩阵 添加 平移 、 旋 转 等 ， 正 如 我 们 展示 出 来 的 

现在 ， 我 们 不 再 通过 创建 mat4 的 实例 来 构建 变换 ， 而 是 使 用 push(O 命 令 在 堆栈 顶部 创 
建新 的 矩阵。 然后 再 根据 需要 将 期 望 的 变换 应 用 于 堆栈 顶部 的 新 创建 的 矩阵 。 

推 入 堆栈 的 第 一 个 矩阵 通常 是 视图 矩阵 。 它 上 面 的 矩阵 是 复杂 程度 越 来 越 高 的 模型 - 视 
图 矩阵 ， 也 就 是 说 ， 它 们 应 用 了 越 来 越 多 的 模型 变换 。 这 些 变换 既 可 以 直接 应 用 ， 也 可 以 
先 结合 其 他 和 矩阵。 

在 我 们 的 行星 系统 示例 中 , 位 于 视图 矩阵 正 上 方 的 矩阵 将 是 太阳 的 MV 和 矩阵。 在 它 之 上 
的 矩阵 将 是 地 球 的 MV 和 矩阵， 由 太阳 的 MV 和 矩阵 的 副本 和 应 用 于 其 之 上 的 地 球 模型 矩阵 变 
换 组 成 。 也 就 是 说 ， 地 球 的 MV 和 矩阵 是 通过 将 行星 的 变换 结合 到 太阳 的 变换 中 而 建立 的 。 
同样 ， 月 球 的 MV 算 阵 位 于 行星 的 MV 矩阵 之 上 ， 并 通过 将 月 球 的 模型 矩阵 变换 应 用 于 紧 
邻 其 下 方 的 行星 的 MV 矩阵 来 构建 。 

在 泻 染 月 球 之 后 ， 可 以 通过 从 堆栈 中 “弹出 ”第 一 个 月 球 的 矩阵 (将 堆栈 的 顶部 恢复 到 
行星 的 模型 -视图 和 矩阵 )， 然 后 重复 第 二 个 月 球 的 过 程 ， 来 演 染 第 二 个 “月 球 ”。 

基本 方法 如 下 。 

(1) 我 们 声明 我 们 的 堆栈 ， 给 它 起 名 为 “mvStack”。 

(2) 当 相 对 于 父 对 象 创建 新 对 象 时 ， 调 用 “mvStack.push(mvStack.top())”。 

(3) 应 用 新 对 象 所 需 的 变换 ， 也 就 是 将 所 需 的 变换 乘 以 它 。 

(4) 完成 对 象 或 子 对 象 的 绘制 后 ， 调 用 “mvStack.pop0” 从 矩阵 堆栈 顶部 移 除 其 模型 - 
ATL SE BE 

在 后 面 的 章节 中 , 我 们 将 学 习 如 何 创 建 球体 并 使 它们 看 起 来 像 行星 和 卫星 。 就 目前 而 言 ， 
为 了 简单 起 见 ， 我 们 将 使 用 我 们 的 金字 塔 和 几 个 立方 体 构建 一 个 “行星 系统 ”。 

表 4.1 概述 了 使 用 矩阵 堆栈 的 display(0) 函 数 通 常 是 什么 结构 。 





表 4.1 使 用 矩阵 堆栈 的 display() 函 数 的 结构 
配置 @ 实例 化 矩阵 堆栈 





o 将 新 矩阵 推 入 堆栈 〈 这 将 实例 化 一 个 空 的 视图 矩阵 ) 
@ 将 变换 应 用 于 堆栈 顶部 的 视图 矩阵 


摄像 机 
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o 将 新 矩阵 推 入 堆栈 〈 这 将 是 父 MV 矩阵 一 一 对 第 一 个 父 对 象 来 说 ， 它 直 
接 复制 一 份 视图 矩阵 ) 
o ”应 用 变换 ， 将 父 对 象 的 模型 第 阵 和 复制 的 视图 矩阵 结合 








@ 发 送 最 顶层 的 矩阵 〈 即 对 项 点 着 色 器 中 的 MV 和 矩阵 统一 变量 使 用 
"glm::value_ptr()" ) 
@ 绘制 父 对 象 
@ 将 新 矩阵 推 入 堆栈 。 这 将 是 子 对 象 的 MV 和 矩阵， 最 初 直接 复制 一 份 父 对 
象 的 MV HERE 
a @ SHR, TITA ARAE EAR BAS MV BEG 


@ 发送 最 顶层 的 矩阵 〈 即 对 项 点 着 色 器 中 的 MV 矩阵 统一 变量 使 用 "glm:: 
value_ptr()") 

@ 绘制 子 对 象 

o ”将 子 对 象 的 MV 和 矩阵 弹出 堆栈 

清理 o 将 父 对 象 的 MYV 和 矩阵 弹出 堆栈 

o 将 视图 矩阵 弹出 堆栈 








请 注意 ， 金 字 塔 (“太阳”) 绕 自己 的 轴 旋 转 是 在 它 自 己 的 局 部 坐标 空间 中 ， 不 影响 “ 子 
对 象 ”〈 这 里 指 行星 和 月 亮 )。 因 此 ,“ 太 阳 ” 的 旋转 〈 如 图 4.12 所 示 ) 被 推 到 堆栈 上 ， 但 是 
在 绘制 “太阳 ”之 后 ， 它 必须 从 堆栈 中 移 除 (弹出 )。 








图 4.12 ZTFI (“太阳 ”) 的 旋转 


大 立方 体 (行星 ) 围绕 太阳 的 旋转 (如 图 4.13( 左 ) 所 示 ) 将 影响 月 球 的 运动 ， 因 此 它 
被 推 到 堆栈 上 并 在 绘制 月 球 时 保持 在 那里 。 相 比 之 下 , 行星 在 其 轴 上 的 旋转 (如 图 4.13 E) 
所 示 ) 是 局 部 的 ， 不 会 影响 月 亮 ， 因 此 在 绘制 月 球 之 前 它 需 要 被 从 堆栈 中 弹出 。 
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图 4.13 大 立方 体 (行星 ) 围绕 太阳 的 旋转 〈 左 和 行星 在 其 轴 上 的 旋转 〈 右 ) 


类 似 地 , 我们 会 将 变换 推 入 堆栈 以 进行 月 球 的 旋转 (围绕 行星 及 其 轴 )， 如 图 4.14 所 示 。 





图 4.14 ”月球 的 旋转 (围绕 行星 及 其 轴 ) 


以 下 是 “行星 ”的 步骤 顺序 。 

@ push() 将 是 行星 MV 天 阵 中 也 会 影响 子 对 象 的 部 分 。 

@ translate(...) 将 太阳 周围 的 行星 运动 结合 到 行星 的 MV 矩阵 中 。 在 这 个 例子 中 ， 我们 
使 用 三 角 运 算 来 计算 行星 运动 的 平移 。 

push() 将 是 行星 的 完整 MV 德 阵 ， 也 包括 它 的 轴 旋 转 。 

rotate(...) 结 合 行星 的 轴 旋 转 〈 稍 后 会 弹出 ， 不 会 影响 子 对 象 )。 
glm::value_ptr(mvStack.top())3k#X MV 和 矩阵， 然后 将 其 发 送 到 MV 统一 变量 。 

绘制 星球 。 

pop() 将 行星 MV 和 矩阵 从 堆栈 中 移 除 ， 暴 露出 它 下 面 行星 MV FEB ANF Eh 
旋转 的 早期 副本 (因此 只 有 行星 的 平移 会 影响 月 亮 )。 

现在 我 们 可 以 编写 完整 的 display0 函 数 ， 如 程序 4.4 所 示 。 


程序 4.4 ”使 用 矩阵 堆栈 的 简单 太阳 系 





stack<glm::mat4> mvStack; 
void display(GLFWwindow* window, double currentTime) { 
// WEHI PRED. TER AAP, DA AAO PE AY Be i 
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// 将 视图 矩阵 推 入 堆栈 
vMat = glm::translate(glm::mat4(1.0f), glm::vec3(-cameraX, -cameraY, -cameraZ)); 
mvStack. push (vMat) ; 


|| ---------------------- EFW == 太阴 -ssrin hn et ea eee 

mvStack. push (mvStack.top()); 

mvStack.top() *= glm::translate(glm::mat4(1.0f£), glm::vec3(0.0f, 0.0f, 0.0f)); // 太阳 位 置 

mvStack.push (mvStack.top())7 

mvStack.top() *= glm::rotate(glm::mat4(1.0f), (float)currentTime, glm::vec3(1,0f, 0.0f, 0.0£)); 
// 太阳 旋转 

glUniformMatrix4fv(mvLoc, l, GL FALSE, glm::value_ptr(mvStack.top())); 

glBindBuffer(GL_ARRAY BUFFER, vbo[1]); 

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0); 

glEnableVertexAttribArray (0); 

glEnable (GL DEPTH TEST) ; 

glEnable (GL LEQUAL); 


glDrawArrays (GL TRIANGLES, 0, 18); // 绘制 太阳 
mvStack.pop(); // 从 堆栈 中 移 除 太阳 的 轴 旋 转 
//----------------------- MH == 行星 --------------------------------------------- 


mvStack.push(mvStack.top()); 
mvStack.top() *= 
glm: :translate (glm: :mat4(1.0f), glm::vec3(sin( (float) currentTime)*4.0, 0.0f, cos((float) 
currentTime)*4.0)); 
mvStack.push (mvStack.top()); 
mvStack.top() *= glm::rotate(glm::mat4(1.0f), (float)currentTime, glm::vec3(0.0, 1.0, 0.0)); 
// 行星 旋转 
glUniformMatrix4fv(mvLoc, 1, GL FALSE, glm::value_ptr(mvStack.top())); 
glBindBuffer(GL_ARRAY BUFFER, vbo[0]); 
glVertexAttribPointer(0, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0); 


glDrawArrays(GL TRIANGLES, 0, 36); // 绘制 行星 
mvStack.pop(); // 从 堆栈 中 移 除 行星 的 轴 旋 转 
//----------------------- 小 立方 体 == ARR ----------------------------------- 


mVStack.pPush (mvStack.top() ); 
mvStack.top() *= 
glm::translate(glm::mat4(1.0f£), glm::vec3(0.0f, sin((float)currentTime) *2.0, 
cos ( (float) currentTime) *2.0)); 
mvStack.top() *= glm::rotate(glm::mat4(1.0f), (float)currentTime, glm;:vec3(0.0, 0.0, 1.0)); 
// 月 球 旋转 
mvStack.top() *= glm::scale(glm::mat4(1.0f), glm::vec3(0.25f, 0.25f, 0.25f)); // 让 月 球 小 一 些 
glUniformMatrix4fv(mvLoc, 1, GL_FALSE, glm::value_ptr(mvStack.top())); 
glBindBuffer (GL ARRAY BUFFER, vbo[0]); 
glVertexAttribPointer (0, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0); 
glDrawArrays (GL_TRIANGLES, 0, 36); // 绘制 月 球 


// 从 堆栈 中 移 除 月 球 缩放 、 旋 转 、 位 置 矩阵 ， 行 星 位 置 矩 阵 ， 太 阳 位 置 矩 阵 ， 和 视图 矩阵 
mvStack.pop(); mvStack.pop(); mvStack.pop(); mvStack.pop(); 


和 矩阵 堆栈 操作 已 突出 显示 。 有 几 个 值得 注意 的 细节 ; 


我 们 在 模型 矩阵 中 引入 了 缩放 操作 。 我 们 希望 月 球 比 行星 更 小 ， 所 以 我 们 在 为 月 球 
构建 MV 矩阵 时 调用 了 scale()。 

在 这 个 例子 中 ， 我 们 使 用 三 角 运 算 sin0 和 cos() 来 计算 行星 绕 太 阳 的 旋转 〈 作 为 平 
移 的 方式 )， 以 及 月 球 绕 行星 的 旋转 。 
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@ 两 个 缓冲 区 加 和 #1 分 别 包 含 立 方 体 和 金字 塔 的 项 点。 
@ 注意 在 glUniformMatrix() 命 令 中 调用 的 gm::value_ptrtnvMatrix.topO) 函 数 。 这 个 调 
用 获取 了 堆栈 顶部 矩阵 中 的 值 ， 然 后 将 这 些 值 发 送 到 统一 变量 〈 在 本 例 中 为 太阳 、 
行星 以 及 月 球 的 MV FERE). 
此 处 省 略 顶 点 和 片段 着 色 器 代码 一 一 它们 与 前 一 个 示例 相同 。 我 们 还 移动 了 金字 塔 (“ 太 
阳 ” 和 摄像 机 的 初始 位 置 ， 以 使 场景 在 屏幕 上 居中 。 





4.9 MS “ZopR” (AR 


回想 一 下 ， 在 泻 染 多 个 对 象 时 ，OpenGL 使 用 乙 缓冲 区 算法 (Z-buffer algorithm) (àn 
图 2.14 所 示 ) 来 进行 隐藏 面 消 除 。 通 常情 况 下 ， 通 过 选择 最 接近 相机 的 相应 片段 的 颜色 
作为 像素 的 颜色 ， 这 种 方法 解决 了 哪些 物体 的 曲面 可 见 并 呈现 到 屏幕 ， 而 哪些 曲面 位 于 其 
他 物体 后 面 因此 不 应 该 被 泻 染 。 

然而 ， 有 时 候 场 景 中 的 两 个 物体 表面 重 
合并 位 于 重合 的 平面 中 ， 这 使 得 Z 缓冲 区 算 
法 难以 确定 应 该 演 染 两 个 表面 中 的 哪 一 个 
(因为 两 者 都 不 “最 接近 ”摄像 机 )。 发 生 这 
种 情况 时 ， 浮 点 舍 入 误差 可 能 会 导致 演 染 表 
面 的 某 些 部 分 使 用 其 中 一 个 对 象 的 颜色 ， 而 
其 他 部 分 则 使 用 另 一 个 对 象 的 颜色 。 这 种 不 
自然 的 伪 影 被 称 为 Z 冲突 〈Z-fighting) 或 深 
度 冲突 (Depth-fighting)， 因 为 这 种 效果 是 演 
染 的 片段 在 Z 缓冲 区 中 相互 对 应 的 像素 条 目 
上 “冲突 斗争 ”的 结果 。 图 4.15( 见 彩 插 )》 
显示 了 两 个 具有 重 炙 重合 ( 顶 ) 面 的 盒子 之 
间 的 Z 冲突 示例 。 

创建 地 形 或 阴影 时 经 常会 出 现 这 种 情况 。 在 这 种 情况 下 ,有 时 Z 冲突 是 可 以 预知 的 ， 并 
是 校正 它 的 常用 方法 是 稍微 移动 一 个 物体 ， 使 得 表面 不 再 是 共 面 的 。 我 们 将 在 第 8 章 中 看 
到 这 样 的 例子 。 

Z 冲突 还 可 能 是 由 于 深度 缓冲 器 中 的 值 的 精度 有 限 。 对 于 由 Z 缓冲 器 算法 处 理 的 每 个 像 
素 ， 其 深度 信息 的 精度 受 深 度 缓冲 器 中 可 存储 的 位 数 限 制 。 用 于 构建 透视 矩阵 的 近 剪 裁 平 
面 和 远 剪裁 平面 之 间 的 范围 越 大 ， 具 有 相似 〈 但 不 相等 ) 的 实际 深度 的 两 个 对 象 的 点 在 深 
度 缓冲 区 中 的 数值 表示 越 可 能 相同 。 因 此 ， 程 序 员 可 以 选择 适当 的 近 、 远 剪裁 平面 值 来 最 
小 化 两 个 平面 之 间 的 距离 ， 同 时 仍然 确保 场景 必需 的 所 有 对 象 都 位 于 视 锥 内 。 

同样 重要 的 是 要 理解 ， 由 于 透视 变换 的 影响 ， 改 变 近 前 裁 平 面值 可 能 比 对 远 前 裁 平 面 
进行 等 效 变 化 对 于 乙 冲 突 伪 影 具 有 更 大 的 影响 。 因 此 ,建议 避免 选择 太 靠 近 眼 睛 的 近 剪 裁 
平面 。 

本 书 前 面 的 例子 只 是 简单 地 使 用 了 0.1 和 1000 的 值 〈 在 我 们 对 perspective() 的 调用 中 ) 





图 4.15 Z 冲突 示例 


-DO eS 
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用 于 近 前 裁 平 面 和 远 前 裁 平 面 。 这 些 可 能 需要 针对 您 的 场景 进行 调整 。 


410 图 元 的 其 他 选项 


OpenGL 支持 许多 图 元 类 型 一 一 到 目前 为 止 我 们 已 经 看 到 了 两 个 : GL_TRIANGLES 和 
GL _ POINTS。 事实 上 ， 还 有 好 几 个 其 他 的 选择 。OpenGL 支持 的 所 有 可 用 图 元 类 型 都 属于 
三 角形 、 线 、 点 或 者 补丁 的 类 别 。 以 下 是 一 个 完整 的 清单 。 





三 角形 图 元 : 
本 书 中 常见 的 图 元 类 型 。 管 线 中 传递 的 每 3 个 顶点 数据 组 成 一 
GL_TRIANGLES 个 三 角形 : 
2 5 8 
01213 4 5]}67 8 
顶点 : x V i 等 
三 角形 : 
管线 中 传递 的 每 个 顶点 实际 上 和 之 前 的 两 个 顶点 组 成 一 个 三 
GL_TRIANCLE STRIP 角形 : 
顶点 : 
1L2 1 314] 
三 角形 : Vk 等 
GL_ TRIANGLE FAN 管线 中 传递 的 每 对 顶点 和 最 开始 的 第 一 个 顶点 组 成 一 个 三 
1 角形 : 
2 Wim: 0 1 2 3 4 等 
0 
i ao a T 
4 三 角形 : 


仅 用 于 几何 着 色 器 。 人 允许 着 色 器 访问 当前 三 角形 的 顶点 ， 以 及 
额外 的 相 邻 顶点 

仅 用 于 几何 着 色 器 。 类 似 GL_TRIANGLES_ ADJACENCY， 除 
了 三 角形 顶点 像 GL_TRIANGLE_STRIP 中 一 样 互 相 重合 


GL_TRIANGLES_ ADJACENCY 


GL_TRIANGLE_STRIP_ADJACENCY 


线 图 元 : 


GL_LINES 


so ee, A. 









管线 中 传递 的 每 两 个 顶点 组 成 一 条 线 : 
顶点 : 
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续 表 
管线 中 传递 的 每 个 顶点 和 前 一 个 顶点 组 成 一 条 线 : 
顶点 : 


ae Stats 


线 : vv 等 


ER GL_LINE_STRIP 一 样 ， 除 了 第 一 个 顶点 和 最 后 一 个 顶点 之 
间 也 会 组 成 一 条 线 

仅 用 于 几何 着 色 器 。 人 允许 着 色 器 访问 当前 线 的 顶点 ， 以 及 额外 
的 相 邻 顶点 

类 似 GL LINES_ ADJACENCY， 除 了 线 顶 点 像 GL_LINE_STRISTRIP 
Hi — PE AFH BE 


GL_LINE_STRIP 


GL_LINE_LOOP 


GL_LINES_ADJACENCY 


GL_LINE_STRIP_ADJACENCY 


点 图 元 : 





管线 中 传递 的 每 个 顶点 是 一 个 点 






GL POINTS 


补丁 图 元 : 
仅 用 于 细 分 着 色 器 。 指 示 一 组 项 点 从 项 点 着 色 器 传递 到 细 分 控 


GL PATCH 
a 制 着 色 器 ， 在 这 里 它们 通常 用 于 将 曲面 细 分 网 格 成 形 为 曲面 


4.11 性 能 优先 的 编程 方法 


随 着 3D 场景 的 复杂 性 增加 ， 我 们 将 越 来 越 关 注 性 能 。 我 们 已 经 看 到 一 些 例 子 ， 我 们 为 
了 速度 做 出 一 些 编程 决策 一 一 例如 当 我 们 使 用 实例 化 时 , 以 及 当 我 们 将 昂贵 的 计算 转移 到 着 
色 器 时 。 

实际 上 ， 我 们 展示 的 代码 已 经 包含 了 一 些 我 们 尚未 讨论 的 其 他 优化 。 我 们 现在 来 探索 这 
些 和 其 他 重要 技术 。 


4.11.1 尽量 减少 动态 内 存 空间 分 配 


考虑 到 性 能 ， 我 们 的 C++ 代码 的 最 关键 部 分 显然 是 display0 函 数 。 这 是 在 任何 动画 或 实 
时 演 染 过 程 中 重复 调用 的 函数 ， 因 此 在 此 函数 中 【或 在 它 调用 的 任何 函数 中 ) 我 们 必须 努 
力 实现 最 高 的 效率 。 

将 display0 函 数 的 开销 保持 在 最 低 限 度 的 一 个 重要 方法 是 避免 任何 需要 内 存 分 配 的 步 
又 。 因 此 ， 明 显要 避免 的 事情 的 例子 包括 : 

@ 实例 化 对 象 ; 

@ 声明 变量 。 

如 果 读 者 回顾 我 们 迄今 为 止 开发 的 程序 ， 可 以 观察 到 ， 我 们 实际 上 在 调用 display0 函 数 
之 前 就 已 经 声明 了 display0) 函 数 中 使 用 到 的 每 个 变量 ， 并 分 配 了 它 的 空间 。 声 明 或 实例 化 几 
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乎 从 不 出 现在 display0) 函 数 中 。 例 如 ， 程 序 4.1 在 它 开头 包含 以 下 代码 块 : 
// 分 配 在 display () 函数 中 使 用 的 变量 空间 ， 这 样 它们 就 不 必 在 泻 染 过 程 中 分 配 


GLuint mvLoc, projLoc; 

int width, height; 

float aspect; 

glm: :mat4 pMat, vMat, mMat, mvMat; 


请 注意 ， 我 们 故意 在 代码 块 的 顶部 放 了 一 个 注释 ， 说 明 这 些 变量 是 预先 分 配 的 ， 以 便 稍 
后 在 display() 函 数 中 使 用 (尽管 我 们 到 现在 才 明 确 地 指出 这 一 点 )。 

在 我 们 的 矩阵 堆栈 示例 中 发 生 了 一 个 未 预先 分 配 的 变量 的 情况 。 使 用 C++ 堆栈 类 ， 每 
次 “ 推 ” 操 作 都 会 导致 动态 内 存 分 配 。 有 趣 的 是 ， 在 Java 中 ，JOML 库 提 供 了 一 个 与 
OpenGL 一 起 使 用 的 MatrixStack 类 , 它 允 许 为 矩 阵 堆 栈 预 先 分 配 空间 ! 我 们 在 本 书 的 Java 
版 中 使 用 它 。 

还 有 其 他 更 微妙 的 例子 。 例如， 将 数据 从 一 种 类 型 转换 为 男 一 种 类 型 的 函数 调用 在 某 些 
情况 下 可 能 会 实例 化 并 返回 新 转换 的 数据 。 因 此 ,理解 从 display0O 调 用 的 任何 库 函 数 的 行为 
非常 重要 。 数 学 库 GLM 并 没有 专门 针对 速度 优化 设计 。 这 导致 一 些 操作 可 能 引起 动态 内 存 
分 配 。 如 果 可 能 的 话 ， 我 们 会 尽量 使 用 直接 在 已 经 分 配 了 空间 的 变量 上 操作 的 GLM 函数 。 
我 们 鼓励 读者 在 性 能 至 关 重 要 时 探索 替代 方法 。 


4.11.2 ”预先 计算 透视 矩阵 


可 以 减少 display0O) 函 数 开 销 的 另 一 个 优化 是 将 透视 矩阵 的 计算 移动 到 init(0) 函 数 中 。 我 们 
在 4.5 节 中 提 到 了 这 种 可 能 性 〈 在 脚注 中 )。 虽 然 这 很 容易 做 到 ， 但 可 能 会 有 一 点 轻微 的 复 
杂 情 况 。 虽 然 通常 并 不 需要 重新 计算 透视 矩阵 ， 但 是 如 果 运 行 应 用 程序 的 用 户 调整 窗口 大 
小 《例如 通过 拖 动 窗口 角 大 小 调整 手柄 )， 则 重新 计算 就 是 必要 的 。 

幸运 的 是 ，GLFW 可 以 配置 在 调整 窗口 大 小 时 自动 回调 指定 的 函数 。 在 调用 init0) 之 前 ， 
我 们 将 以 下 内 容 添加 到 main(): 


glfwSetWindowSizeCallback(window, window reshape callback) ; 


第 一 个 参数 是 GLFW 窗口 , 第 二 个 参数 是 GLFW 在 调整 窗口 大 小 时 调用 的 函数 的 名 称 。 
然后 ， 我 们 将 计算 透视 矩阵 的 代码 移动 到 init0 中 ， 同 时 将 其 复制 到 名 为 window_reshape_ 
callback() 的 新 函数 中 。 

在 程序 4.1 的 例子 中 ， 如 果 我 们 重新 组 织 代码 ， 从 display0 中 删除 透视 矩阵 的 计算 ， 那 
么 main0)、init0、display0 和 新 函数 window_reshape_callback() 修 改 后 的 版 本 将 如 下 所 示 。 


void init(GLFWwindow* window) { 


// 和 之 前 版 本 一 样 ， 再 加 上 以 下 三 行 代码 : 

glfwGetFramebufferSize (window, &width, &height); 

aspect = (float)width / (float)height; 

pMat = glm::perspective(1.0472f£, aspect, 0.1f, 1000.0f); // 1.0472 radians = 60 degrees 
} 


void display (GLFWwindow* window, double currentTime) { 
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// 和 之 前 版 本 一 样 ， 再 移 除 以 下 几 行 代码 ; 


人 
和 
// 函数 余下 部 分 没有 变化 

} 


void window_reshape_callback(GLFWwindow* window, int newWidth, int newHeight) { 
aspect = (float)newWidth / (float)newHeight; // 回调 提供 的 新 的 宽度 、 高 度 
glViewport (0, 0, newWidth, newHeight); // 设置 和 帧 缓冲 区 相关 的 屏幕 区 域 
pMat = glm::perspective(1.0472f, aspect, 0.1f, 1000.0f); 

} 





int main(void) { 
/7 和 之 前 版 本 一 样 ， 再 加 上 以 下 调用 : 


glfwSetWindowSizeCallback (window, window reshape callback); 
init (window) 
while (!glfwWindowShouldClose (window)) { 
// 余下 和 以 前 一 样 
} 


本 书 配 套 资源 中 的 程序 , 与 透视 矩阵 计算 有 关 的 实现 都 是 以 这 种 方式 组 织 的 , 从 程序 4.1 
的 颜色 插值 版 本 开始 。 


4.11.3 AMIR 


提高 泻 染 效率 的 另 一 种 方法 是 利用 OpenGL 的 背面 剔除 能 力 。 当 3D 模型 完全 “闭合 ” 
时 ， 意 味 着 内 部 永远 不 可 见 〈 例 如 对 于 立方 体 和 金字 塔 )， 那 么 外 表面 的 那些 与 观察 者 背离 
呈 一 定 角度 的 部 分 将 始终 被 同一 模型 的 其 他 部 分 遮挡 。 也 就 是 说 ， 那 些 背 离 观 察 者 的 三 角 
形 不 可 能 被 看 到 无论 如 何 它 们 都 会 在 隐藏 面 消 除 的 过 程 中 被 覆盖 )， 因 此 没有 理由 光栅 化 
或 泻 染 它们 。 

我 们 可 以 使 用 命令 glEnable(GL_CULL FACE) 要求 OpenGL 识别 并 “剔除 ”( 不 演 染 ) 
背 向 的 三 角形 。 我 们 还 可 以 使 用 giDisable(GL_CULL_FACE)#4H EMAR. BRUT F, 
背面 剔除 是 关闭 的 ， 因 此 如 果 您 希望 OpenGL 剔除 背 向 三 角形 ， 必 须 手 动 启用 它 。 

启用 背面 剔除 时 ， 默 认 情 况 下 ， 只 有 三 角形 朝 前 时 才 会 被 泻 染 。 此 外 ， 默 认 情况 下 ， 如 
果 三 角形 的 3 个 顶点 从 OpenGL 摄像 机 中 查看 是 以 逆 时 针 顺 序 排列 的 〈 基 于 它们 在 缓冲 区 
中 定义 的 顺序 )， 则 三 角形 被 视 为 面向 前 方 。 顶 点 沿 顺 时 针 方 向 排列 的 三 角形 (从 OpenGL 
摄像 机 中 看 ) 是 朝 后 的 ， 不 会 被 泻 染 。 这 种 逆 时 针 方向 定义 的 “前 向 ”有 时 被 称 为 缠绕 顺 
序 , 可 以 使 用 函数 调用 glIFrontFace(GL_ CCW) 显 式 设置 道 时 针 ( 默 认 ) 为 正 向 , 或 glFrontFace 
(GL_CW) 设 置 顺 时 针 为 正 向 。 类 似 地 ， 也 可 以 显 式 设置 是 否 泻 染 正 向 或 背 向 的 三 角形 。 实 
际 上 ， 为 了 这 个 目的 ， 我 们 指定 哪些 不 被 泻 染 一 一 即 哪些 被 “ 剔 除 ”。 我 们 可 以 通过 调用 
glCullFace(GL_ BACK) 指 定 面向 背面 的 三 角形 被 剔除 〈 尽 管 这 是 不 必要 的 ， 因 为 它 是 默认 
的 )。 或 者 ， 我 们 可 以 通过 分 别 用 GL FRONT 或 GL FRONT AND BACK 替换 参数 
GL BACK 来 指定 剔除 前 向 三 角形 ， 甚 至 剔除 所 有 三 角形 。 
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正如 我 们 将 在 第 6 章 中 看 到 的 那样 ，3D 模型 通常 被 设计 成 外 表面 由 相同 缠绕 顺序 的 三 
角形 构成 一 一 最 常见 的 是 逆 时 针 一 一 因此 如 果 启 用 剔除 , 则 默认 情况 下 模型 的 外 部 面向 相机 
的 表面 部 分 会 被 泻 染 。 因 为 默认 情况 下 OpenGL 假定 的 缠绕 顺序 是 道 时 针 方向 ， 如 果 模 型 
设计 缠绕 顺序 为 顺 时 针 方向 ， 那 么 如 果 启 用 了 背面 剔除 ， 需 要 由 程序 员 调 用 gl FrontFace 
(GL_CW) 来 解决 此 问题 。 

注意 ,在 GL_TRIANGLE_STRIP 的 情况 下 , 每 个 三 角形 的 缠绕 顺序 不 停 地 互 换 。 OpenGL 
通过 在 构建 每 个 连续 三 角形 时 “翻转 ”顶点 序列 来 补偿 这 一 点 , 如 下 所 示 : 0-1-2, 然后 2-1-3、 
2-3-4、4-3-5、4-5-6 等 。 

背面 剔除 通过 确保 OpenGL 不 花 时 间 光 栅 化 和 演 染 从 不 被 看 到 的 表面 来 提高 性 能 。 我 们 
在 本 章 中 看 到 的 大 多 数 示例 都 非常 小 ， 以 至 于 没有 动机 进行 背面 剔除 (图 4.9 中 展示 了 一 个 
例外 ， 其 中 包含 了 100 000 个 多 边 形 动画 实例 ， 这 可 能 会 对 某 些 系统 造成 性 能 挑战 )。 在 实 
RP, KBR 3D 模型 通常 是 “闭合 的 ” 因此 习惯 上 会 常规 地 启用 背面 剔除 。 例 如 ， 我 们 
可 以 通过 修改 display0 函 数 向 程序 4.3 添加 背面 剔除 ， 如 下 所 示 。 


void display (GLFWwindow* window, double currentTime) { 
glEnable (GL CULL FACE); 
// 绘制 立方 体 


glEnable (GL DEPTH TEST); 

glDepthFunc (GL LEQUAL); 

glFrontFace (GL CW); // 立方 体 项 点 的 缠绕 顺序 为 顺 时针 方 向 
glDrawArrays(GL TRIANGLES, 0, 36); 


// 绘制 金字 塔 


glEnable (GL DEPTH TEST) ; 

glDepthFunc (GL LEQUAL); 

glFrontFace (GL CCW); // 金字 塔 顶 点 缠绕 顺序 为 逆 时 针 方向 
glDrawArrays (GL_TRIANGLES, 0, 18); 

} 

使 用 背面 吻 除 时 ,正确 设置 缠绕 顺序 非常 重要 ,不 正确 的 设置 ,例如 当 应 该 设置 GL_CCW 
时 设置 成 了 GL_CW， 可 能 会 导致 演 染 出 对 象 的 内 部 而 不 是 其 外 部 ， 这 就 会 产生 类 似 于 不 正 
确 的 透视 矩阵 的 失真 。 

效率 不 是 进行 背面 剔除 的 唯一 原因 。 在 后 面 的 章节 中 ， 我 们 将 看 到 其 他 用 途 ， 例 如 我 们 
想 要 查看 3D 模型 内 部 或 使 用 透明 度 时 的 情况 。 


补充 说 明 


在 OpenGL/GLSL 中 ， 有 许多 其 他 功能 和 结构 可 用 于 管理 和 利用 数据 ， 我 们 在 本 章 中 仅 
涉及 了 很 浅 层 的 一 部 分 。 例 如 ,我 们 没有 描述 统一 块 ， 这 是 一 种 类 似 于 C 中 的 struct 的 用 于 
统一 变量 的 机 制 。 甚 至 可 以 设置 统一 块 从 缓冲 区 接收 数据 。 另 一 个 强大 的 机 制 是 着 色 器 存 
储 块 ， 它 本 质 上 是 一 个 着 色 器 可 以 写 入 的 缓冲 区 。 

关于 管理 数据 的 许多 选项 的 一 个 很 好 的 参考 资料 是 《OpenGL ERRI) SWS, Fa 
是 关于 数据 的 章节 【第 7 版 的 第 5 章 )。 它 还 描述 了 我 们 所 涵盖 的 各 种 命令 的 许多 细节 和 
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选项 。 本 章 的 前 两 个 示例 程序 ， 即 程序 4.1 和 程序 4.2 受到 《OpenGL 超级 宝典 》 中 类 似 
示例 的 启发 。 

我 们 还 需要 学 习 如 何 管理 其 他 类 型 的 数据 ， 以 了 解 如 何 将 它们 发 送 给 OpenGL 管线 。 其 
中 之 一 是 纹理 ， 包 含 可 用 于 “绘制 ”场景 中 对 象 的 彩色 图 像 数 据 〈 像 照片 )。 我 们 将 在 第 5 
章 中 研究 纹理 图 像 。 我 们 将 进一步 研究 的 另 一 个 重要 缓冲 区 是 深度 缓冲 区 或 者 叫 Z 缓冲 
区 )。 当 我 们 在 第 8 章 中 研究 阴影 时 ， 这 将 变 得 很 重要 。 关 于 如 何在 OpenGL 中 管理 图 形 数 
据 ， 我 们 还 有 很 多 知识 需要 学 习 ! 


>) eh 


rw) 


41 CORB) 修改 程序 4.1 以 使 用 你 自己 设计 的 其 他 简单 3D 形状 蔡 换 立方 体 。 请 务必 
在 glIDrawArrays() 命 令 中 正确 指定 顶点 数 。 

4.2 (RA) 在 程序 4.1 中 ， 在 display(0) 函 数 中 “view” 和 矩阵 被 简单 地 定义 为 摄像 机 位 
置 的 负数 : 


vMat = glm::translate(glm: :mat4(1.0f), glm::vec3(-cameraX, -cameraY, -cameraZ) ); 


将 此 代码 替换 为 图 3.13 所 示 的 计算 实现 。 这 将 允许 你 通过 指定 摄像 机 位 置 和 3 个 朝向 轴 
来 定位 摄像 机 。 你 将 发 现 有 必要 存储 3.7 节 中 描述 的 向 量 VU、V、N。 然 后 ， 尝 试 不 同 的 摄 
像 机 视点 ， 并 观察 泻 染 立方 体 的 最 终 外 观 。 

4.3 (RA) 修改 程序 4.4 以 包含 第 二 个 “行星 ” 使 用 练习 4.1 中 你 自 定义 的 3D 形状 。 
确保 你 的 新 “行星 ”处 于 与 现 有 行星 不 同 的 轨道 上 上， 这样 它 们 就 不 会 发 生 碰撞 。 

44 (RA) 修改 程序 4.4， 使 用 “查看 ”函数 构建 “视图 ”和 矩阵 (如 第 3.9 节 所 述 )。 
然后 尝试 将 “查看 ”参数 设置 到 不 同 的 位 置 ， 例 如 查看 太阳 (在 这 种 情况 下 场景 应 该 看 起 
来 正常 )， 查 看 行星 或 查看 月 球 。 

4.5 CFR) 提出 glCullFace(GL_FRONT_AND BACK) 的 实际 用 途 。 


参考 资料 


[BL16] Blender, The Blender Foundation, accessed October 2018. 

[HT16] J. Hastings-Trew, JHT’s Planetary Pixel Emporium, accessed October 2018. 

[MA16] Maya, AutoDesk, Inc., accessed October 2018. 

[NA16] NASA 3D Resources, accessed October 2018. 

[OL16] Legacy OpenGL, accessed July 2016. 

[SW15] G Sellers, R. Wright Jr., and N. Haemel, OpenGL SuperBible: Comprehensive Tutorial and Reference, 7th 
ed. (Addison-Wesley, 2015). 


第 5 章 纹理 贴图 


纹理 贴图 是 在 光栅 化 的 模型 表面 上 覆盖 图 像 的 技术 。 它 是 为 泻 染 场景 添加 真实 感 的 最 基 
本 和 最 重要 的 方法 之 一 。 

纹理 贴图 非常 重要 ， 因 此 硬件 也 为 它 提供 了 支持 ， 使 得 它 具备 了 实现 实时 的 照片 级 真实 
感 的 超 高 性 能 。 纹 理 单元 是 专 为 纹理 设计 的 硬件 组 件 ， 现 代 显 卡通 常 带 有 数 个 纹理 单元 。 





5.1 ”加载 纹 理 图 像 文件 


为 了 在 OpenGL/GLSL 中 有 效 地 完成 纹理 贴图 ， 需 要 协调 好 以 下 几 个 不 同 的 数据 集 和 机 制 : 
用 于 保存 纹理 图 像 的 纹理 对 象 〈 在 本 章 中 我 们 仅 考虑 2D 图 像 ); 
一 个 特殊 的 统一 采样 器 变量 ， 以 便 顶 点 着 色 器 可 以 访问 纹理 ; 
用 于 保存 纹理 坐标 的 缓冲 区 ; 
用 于 将 纹理 坐标 传递 给 管线 的 顶点 属性 ; 

@ 显卡 上 的 纹理 单元 。 

纹理 图 像 可 以 是 任何 图 像 。 它 可 以 是 人 造 的 或 者 自然 产生 的 事物 的 图 片 ， 例 如 布 、 草 或 
行星 表面 ; 它 也 可 以 是 几何 图 样 ， 例 如 图 5.1 中 的 棋盘 图 样 。 在 电子 游戏 和 动画 电影 中 ， 纹 
理 图 像 通常 用 于 给 角色 绘制 面部 和 衣服 ， 或 者 在 像 图 5.1 中 的 海豚 等 生物 身上 绘制 皮肤 。 


添加 纹理 后 的 对 象 








图 5.1 使 用 两 张 不 同 的 图 像 给 同一 个 海豚 模型 添加 纹理 "9 
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图 像 通常 存储 在 图 像 文件 中 ， 例 如 .jpg、.png、.gif 或 .tiff 格式 。 为 了 使 纹理 图 像 可 以 被 
用 于 OpenGL 管线 中 的 着 色 器 ， 我 们 需要 从 图 像 中 提取 颜色 并 将 它们 放 入 OpenGL 纹理 对 
象 〈 用 于 保存 纹理 图 像 的 内 置 OpenGL 结构 ) 中 。 

许多 C++ 库 可 用 于 读 取 和 处 理 图 像 文件 , 常见 的 选择 包括 Cimg. BoostGIL 和 Magick++。 
我 们 选择 使 用 专 为 OpenGL 设计 的 名 为 SOIL2 Sl HE, 它 基 于 曾经 非常 流行 但 现在 已 经 过 
时 的 库 SOIL。 在 附录 A 和 附录 B 中 介绍 了 SOIL2 的 安装 步骤 。 

通常 我 们 将 纹理 加 载 到 OpenGL 应 用 程序 的 步骤 是 : Ca) 使 用 SOIL2 实例 化 OpenGL 纹 
理 对 象 并 从 图 像 文件 中 读 入 数据 ; b) 调用 glBindTextureO 以 使 新 创建 的 纹理 对 象 处 于 激活 
状态 ;(c) 使 用 glTexParameter(O) 函 数 调整 纹理 设置 .最终 获得 的 结果 就 是 现在 可 用 的 OpenGL 
纹理 对 象 的 整 型 ID。 

创建 一 个 纹理 对 象 ， 首 先 需要 声明 一 个 GLuint 类 型 的 变量 。 正 如 我 们 所 看 到 的 ， 这 是 
一 个 用 于 保存 OpenGL 对 象 的 整 型 ID 引用 的 OpenGL AA. PR, KT VA 
SOIL load OGL texture() 来 实际 生成 纹理 对 象 SOIL load_OGL texture() 函 数 接受 图 像 文件 
名 作为 其 参数 之 一 〈 稍 后 将 描述 一 些 其 他 参数 )。 这 些 步骤 在 以 下 函数 中 实现 : 

GLuint loadTexture(const char *texImagePath) { 

GLuint textureID; 
textureID = SOIL _load_OGL_texture(texImagePath, 
SOIL LOAD AUTO, SOIL CREATE NEW ID, SOIL FLAG INVERT_Y); 
if (textureID == 0) cout << "could not find texture file" << texImagePath << endl; 


return textureID; 


} 


我 们 会 经 常 使 用 这 个 函数 ， 所 以 我 们 将 它 添 加 到 Utils.cpp 实用 工具 类 中 。 这 样 ， 我 们 的 
C++ 应 用 程序 就 只 需 调 用 上 述 的 loadTexture() 函 数 来 创建 OpenGL 纹理 对 象 ， 如 下 所 示 。 


GLuint myTexture = Utils::loadTexture("image. jpg") ; 


其 中 image.jpg 是 纹理 图 像 文 件 ，myTexture 是 生成 的 OpenGL 纹理 对 象 的 整 型 ID. 1X 
里 支持 多 种 图 像 文 件 类 型 ， 包 括 前 面 列 出 的 所 有 图 像 文 件 类 型 。 


5.2 纹理 坐标 


现在 我 们 已 经 有 了 将 纹理 图 像 加 载 到 OpenGL 中 的 方法 , 我 们 需要 指定 我 们 希望 如 何 将 
纹理 应 用 于 对 象 的 演 染 表面 。 我 们 通过 为 模型 中 的 每 个 顶点 指定 纹理 坐标 来 完成 此 操作 。 

纹理 坐标 是 对 纹理 图 像 〈 通 常 是 2D) 中 的 像素 的 引用 。 纹 理 图 像 中 的 像素 被 称 为 纹 素 
(Texel), 以 便 将 它们 与 在 屏幕 上 呈现 的 像素 区 分 开 。 纹理 坐标 用 于 将 3D 模型 上 的 点 映射 到 
纹理 中 的 位 置 。 除 了 将 它 定 位 在 3D 空间 中 的 (x,y,z) 坐 标 之 外 ， 模 型 表面 上 的 每 个 点 还 具有 
纹理 坐标 (s,t)， 用 来 指定 纹理 图 像 中 的 哪个 纹 素 为 它 提供 颜色 。 这 样 ， 物 体 的 表面 被 按照 纹 
理 图 像 “ 涂 画 ”。 纹 理 在 对 象 表 面 上 的 朝向 由 分 配给 对 象 顶 点 的 纹理 坐标 来 确定 。 

要 使 用 纹理 贴图 ， 必 须 为 要 添加 纹理 的 对 象 中 的 每 个 顶点 提供 纹理 坐标 。OpenGL 将 使 
用 这 些 纹理 坐标 ， 查 找 存 储 在 纹理 图 像 中 的 引用 的 纹 素 的 颜色 ， 来 确定 模型 中 每 个 光栅 化 
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像素 的 颜色 。 为 了 确保 泻 染 模型 中 的 每 个 像素 都 使 用 纹理 图 像 中 的 适当 纹 素 进行 绘制 ， 纹 
理 坐 标 也 需要 被 放 入 项 点 属性 中 ， 以 便 它 们 也 由 光栅 着 色 器 进行 插值 。 以 这 种 方式 ， 纹 理 
图 像 与 模型 顶点 一 起 被 插值 或 者 填充 。 


对 于 通过 顶点 着 色 器 的 每 组 顶点 坐标 (cy*3， 会 有 一 组 相应 的 纹理 坐标 (% 力 。 因 此 ， 我 们 
将 设置 两 个 缓冲 区 ， 一 个 用 于 项 点 (每 个 条 目 中 有 3 个 分 量 x、y 和 z)， 男 一 个 用 于 相应 的 


纹理 坐标 (每 个 条 目 中 有 两 个 分 量 s 和 71)。 这 样 , 每 次 顶点 着 色 器 的 调用 接收 到 一 个 顶点 的 
数据 ， 现 在 包括 了 其 空间 坐标 和 相应 的 纹理 坐标 。 

2D 纹理 坐标 最 为 常见 〈OpenGL 确实 支持 其 他 一 些 维度 ， 但 我 们 不 会 在 本 章 中 介绍 它 
们 )。2D 纹理 图 像 被 设 定 为 矩形 , 左下 角 的 位 置 坐 标 为 (0,0), 右上 和 角 的 位 置 坐 标 为 (1,1)。“ 理 
想 情 况 下 ， 纹 理 坐 标 应 该 在 [0…1] 范 围 内 取 值 。 

考虑 图 5.2 中 的 示例 。 回 想 一 下 ， 立 方 体 模型 由 三 角形 构成 。 我 们 的 示意 图 中 突出 显示 
了 立方 体 一 侧 的 4 个 角 ， 但 请 记 住 ， 立 方 体 的 每 个 正方 形 侧面 需要 两 个 三 角形 。 指 定 这 一 
个 立方 体 侧面 的 6 个 顶点 中 的 每 一 个 的 纹理 坐标 沿 着 4 个 角 列 出 ， 左 上 角 和 右 下 角 各 自由 
一 对 顶点 组 成 。 示例 里 也 显示 了 纹理 图 像 。 纹理 坐标 (由 s 和 + 描述 ) 将 图 像 的 部 分 ( 纹 素 ) 
映射 到 模型 正面 的 光栅 化 像素 上 。 请 注意 ， 顶 点 之 间 的 所 有 中 间 像 素 都 已 使 用 图 像 中 间 插 
值 的 纹 素 进行 绘制 。 这 正 是 因为 纹理 坐标 在 顶点 属性 中 被 发 送 到 片段 着 色 器 ， 因 此 也 像 顶 
点 本 身 一 样 被 插值 。 





(1,0) 
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在 这 个 示例 中 ， 出 于 说 明 的 目的 ， 我 们 故意 指定 了 会 导致 奇怪 的 表面 绘制 的 纹理 坐标 。 
仔细 观察 , 您 还 可 以 看 到 图 像 看 起 来 略微 拉 伸 一 一 这 是 因为 纹理 图 像 的 长 宽 比 与 立方 体面 相 
关 的 给 定 纹理 坐标 的 长 宽 比 不 匹配 。 

对 于 立方 体 或 金字 塔 这 样 的 简单 模型 ， 选 择 纹理 坐标 相对 容易 。 但 对 于 具有 大 量 三 角形 
的 更 复杂 的 弯曲 模型 ， 手 动 确定 它们 是 不 切实 际 的 。 在 弯曲 的 几何 形状 《例如 球形 或 环 面 ) 
的 情况 下 ， 可 以 通过 算法 或 数学 方式 计算 纹理 坐标 。 对 于 使 用 Maya mA 或 Blender PHOS 
建 模 工具 构建 的 模型 ， 这 些 工 具 提 供 有 “UV 映射 ”功能 (在 本 书 范围 之 外 )， 使 得 这 项 任 
务 更 容易 。 

让 我 们 回去 演 染 我 们 的 金字 塔 ， 只 是 这 次 用 砖 的 图 像 添 加 纹理 。 我 们 需要 指定 : Ca) 引 





© 这 是 OpenGL 纹理 对 象 所 采用 的 方向 。 然 而 ， 这 与 存储 在 许多 标准 图 像 文 件 格 式 中 的 图 像 的 方向 不 同 ， 在 那些 图 像 中 原点 
位 于 左上 角 。 我 们 通过 指定 SOIL_FLAG _INVERT_Y 参数 ， 重 直 翻 转 图 像 来 重新 定向 ， 使 其 与 OpenGL 的 预期 格式 相对 应 ， 就 
像 我 们 在 loadTexture() 函 数 中 对 SOIL_load_OGL texture0) 进 行 的 调用 一 样 。 
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用 纹理 图 像 的 整 型 ID; (b) 模型 顶点 的 纹理 坐标 ; Cc) 用 于 保存 纹理 坐标 的 缓冲 区 ; Cd) 
顶点 属性 ， 以 便 顶 点 着 色 器 可 以 接收 并 通过 管线 转发 纹理 坐标 ; Ce) 显卡 上 用 于 保存 纹理 对 
象 的 纹理 单元 ; O 我 们 将 很 快 看 到 的 用 于 访问 GLSL 中 纹理 单元 的 统一 采样 器 变量 。 这 些 
将 在 下 一 节 中 描述 。 


5.3 ”创建 纹理 对 象 


假设 此 处 显示 的 纹理 图 像 〈 如 图 5.3 tas) FETE A “brickl jpg” "YI CHEE 





图 5.3 ”纹理 图 像 
如 前 所 示 ， 我 们 可 以 通过 调用 loadTexture() 函 数 来 加 载 此 图 人像， 如 下 所 示 : 


GLuint brickTexture = Utils::loadTexture("brickl.jpg") ; 


回想 一 下 ， 纹 理 对 象 由 整 型 ID 标识 ， 因 此 brickTexture 的 类 型 为 GLuint。 


5.4 构建 纹理 坐标 


我 们 的 金字 塔 有 4 个 三 角形 侧面 和 底部 的 正方 形 底面 。 虽 然 在 几何 上 这 只 需要 5 个 
点 ， 但 我 们 得 用 三 角形 来 泻 染 它 。 这 需要 4 个 三 角形 用 于 侧面 ， 以 及 2 个 三 角形 用 于 正 
方形 底面 ， 总 共 6 个 三 角形 。 每 个 三 角形 有 3 个 顶点 ， 必 须 在 模型 中 指定 总 共 6X3 = 18 

我 们 已 经 在 程序 4.3 的 浮 点 数组 pyramidPositions[ ] 中 列 出 了 人 金字塔 的 几何 顶点 。 我 们 可 
以 通过 多 种 方式 定位 纹理 坐标 ， 以 便 将 砖 纹理 绘制 到 金字 塔 上 。 一 种 简单 (尽管 不 完美 ) 
的 方法 是 使 图 像 的 顶部 中 心 对 应 于 金字 塔 的 尖顶 ， 如 图 5.4 所 示 。 
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图 5.4 纹理 图 像 的 顶部 中 心 对 应 金字 塔 的 尖顶 


我 们 可 以 为 所 有 4 个 三 角形 侧面 这 样 做 。 我 们 还 需要 绘制 金字 塔 的 正方 形 底面 ， 它 由 2 
个 三 角形 组 成 。 一 个 简单 而 合理 的 方法 是 用 图 片 中 的 整个 区 域 为 其 添加 纹理 (图 5.5 所 示 的 
金字 卉 已 被 向 后 放 倒 ， 一 个 侧面 朝 下 )。 


金字 塔 顶 





图 5.5 ”为 金字 塔 底面 添加 纹理 


对 程序 4.3 中 前 9 个 金字 塔 顶点 使 用 这 个 非常 简单 的 策略 ， 相 应 的 顶点 和 纹理 坐标 数据 
组 如 图 5.6 所 示 。 


纹理 坐标 
AN 前 侧面 


A 右 侧面 


/底面 





图 5.6 ”金字塔 的 纹理 坐标 《部 分 清单 ) 
5.5 ”将 纹理 坐标 载 入 缓冲 区 


我 们 可 以 用 与 前 面 加 载 顶 点 相似 的 方式 将 纹理 坐标 加 载 到 VBO 中 ,在 setupVertices() 中 ， 
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我 们 添加 以 下 纹理 坐标 值 声 明 : 


float pyrTexCoords[36] = 

{ 0.0f, 0.0f, 1.0f, 0.0f, 0.5f, 1.0f,  0.0f, 0.0f, 1.0f, 0.0f, 0.5f, 1.0£, // MAT. ANT 
0.0f, 0.0f, 1.0f, 0.0f, 0.5f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.5f, 1.0f, // RAT. At 
0.0f, 0.06 1.0f, 1.0f, 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0£ }; // 底面 的 两 个 三 角形 


然后 ， 在 创建 至 少 两 个 VBO 一 个 用 于 顶点 ， 一 个 用 于 纹理 坐标 〉 之 后 ， 我 们 添加 以 
下 代码 行 以 将 纹理 坐标 加 载 到 VBO #1 F: 


glBindBuffer{GL ARRAY BUFFER, vbo[1]); 
glBufferData (GL ARRAY BUFFER, sizeof (pyrTexCoords), pyrTexCoords, GL STATIC DRAW); 


5.6 在 着 色 器 中 使 用 纹理 : 采样 器 变量 和 纹理 单元 


为 了 最 大 限度 地 提高 性 能 ， 我 们 希望 在 硬件 中 执行 纹理 处 理 。 这 意味 着 我 们 的 片段 着 色 
器 需要 一 种 访问 我 们 在 C++HOpenGL 应 用 程序 中 创建 的 纹理 对 象 的 方法 。 它 的 实现 机 制 是 
通过 一 个 叫 作 统一 采样 器 变量 的 特殊 GLSL 工具 。 这 是 一 个 变量 ， 用 于 指示 显卡 上 的 纹理 
单元 ， 从 加 载 的 纹理 对 象 中 提取 或 “采样 ”哪个 纹 素 。 

在 着 色 器 中 声明 一 个 采样 器 变量 很 简单 一 一 只 需 将 其 添加 到 您 的 统一 变量 中 : 


layout (binding=0) uniform sampler2D samp; 


我 们 声明 的 变量 名 字 叫 作 “samp”。 声 明 的 “layout (binding=0)” 部 分 指定 此 采样 器 与 纹 
理 单元 0 相关 联 。 

纹理 单元 《和 相关 的 采样 器 ) 可 用 于 对 您 希望 的 任何 纹理 对 象 进行 采样 ， 并 且 可 以 在 运 
行 时 进行 更 改 。 您 的 display0 函 数 需 要 指定 纹理 单元 要 为 当前 帧 采样 的 纹理 对 象 。 因 此 ,每 
次 绘制 对 象 时 ， 都 需要 激活 纹理 单元 并 将 其 绑 定 到 特定 的 纹理 对 象 ， 例 如 : 


glActiveTexture (GL TEXTUREO); 
glBindTexture (GL TEXTURE 2D, brickTexture); 


可 用 纹理 单元 的 数量 取决 于 图 形 卡 上 提供 的 数量 。 根 据 OpenGL API 文档 ，OpenGL 4.5 
版 要 求 每 个 着 色 器 阶段 至 少 有 16 个， 所 有 阶段 总 共 至 少 80 TEL, ELAT F, 
我 们 通过 在 glActiveTexture() 调 用 中 指定 GL_TEXTURE0， 使 得 第 0 个 纹理 单元 处 于 激 

要 实际 执行 纹理 处 理 ， 我 们 需要 修改 片段 着 色 器 输出 颜色 的 方式 。 以 前 ， 我 们 的 片段 着 
色 器 要 么 输出 一 个 固定 的 颜色 常量 ， 要 么 从 项 点 属性 获取 颜色 。 相 反 ， 这 次 我 们 需要 使 用 
从 顶点 着 色 器 〈 通 过 光栅 着 色 器 ) 接收 的 插值 纹理 坐标 来 对 纹理 对 象 进行 采样 ， 像 这 样 调 
用 texture() 函 数 : 


in vec2 tc; // 纹理 坐标 


color = texture(samp, tc); 
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5.7 ”纹理 贴图 示例 程序 


程序 5.1 将 前 面 介绍 的 步骤 合并 为 一 个 
呈 序 。 输 出 结果 显示 了 用 砖 图 像 纹 理 贴 图 的 
金字 塔 ， 如 图 5.7 所 示 。 两 个 旋转 代码 清 
单 中 未 显示 ) 被 添加 到 金字 塔 的 模型 矩阵 中 
以 暴露 金字 塔 的 底面 。 
现在 , 根据 需要 , 通过 更 改 loadTexture() 
调用 中 的 文件 名 ， 将 砖 纹理 图 像 替 换 为 其 
他 纹理 图 像 是 一 件 简 单 的 事情 。 例 如 ， 如 果 
我 们 用 图 像 文 件 “icejpg”rm9 蔡 换 
“brick1.jpg” 我 们 得 到 的 结果 如 图 $.8 所 示 。 





图 5.7 使 用 砖 图 像 纹理 贴 图 后 的 金字 塔 





图 5.8 使 用 “ 冰 ” 图 像 纹理 贴图 后 的 金字 塔 
程序 5.1 ” 砖 纹理 的 金字 塔 





C++/OpenGL 应 用 程序 


#include <SOIL2/soil2.h> 
// 其 他 #include 和 以 前 一 样 


#define numVAOs 1 
#define numVBOs 2 


// 摄像 机 和 对 象 位 置 、 演 染 程序 、VAo 和 VBo 的 变量 和 以 前 一 样 


// 显示 函数 的 变量 分 配 和 以 前 一 样 
GLuint brickTexture; 


void setupVertices(void) { 


float pyramidPositions[54] = { /* 如 程序 4.2 中 列 出 的 数据 */ 


float pyrTexCoords[36] = { 


78 





第 5 章 纹理 贴图 


0.0£,, 0.05, LDF 0 0 Dns DE, O.0£, 10E, .0,/0£, 0.5£, 1.0f, 

O.0£, 0.0£,; 1.0£, 0.0f, 0.5£, 1.0f, 0.0f, 0.0£, 1.0f, 0.0f, O.S£, 1.0£, 

O.0f, 0.90f; 1:-0f; 1.0£, (008, 2.0£; 1.0f, 1.0£, 0.0f, 0.0f, 1.0f, 0.0f 
he 


// . . . 像 以 前 一 样 生成 VAO 和 至 少 两 个 VBO， 并 加 载 两 个 缓冲 区 : 
glBindBuffer (GL ARRAY BUFFER, vbo[0]); 
glBufferData(GL_ ARRAY BUFFER, sizeof(pyramidPositions), pyramidPositions, GL_STATIC_DRAW) ; 


glBindBuffer (GL ARRAY BUFFER, vbo[1]); 
glBufferData (GL ARRAY BUFFER, sizeof(pyrTexCoords), pyrTexCoords, GL STATIC DRAW); 


void init (GLFWwindow* window) { 


// 泻 染 程序 配置 、 摄 像 机 和 对 象 位 置 没有 改变 


brickTexture = Utils::loadTexture ("brickl.jpg"); 


void display (GLFWwindow* window, double currentTime) { 


// 背景 颜色 配置 、 深 度 缓冲 区 、 泻 染 程序 ， 以 及 M、V、MV、PRod 矩阵 没有 变化 


glBindBuffer (GL ARRAY BUFFER, vbo[0]); 
glVertexAttribPointer(0, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0); 


glBindBuffer (GL ARRAY BUFFER, vbo[1]); 
glVertexAttribPointer(1, 2, GL FLOAT, GL_FALSE, 0, 0); 
glEnableVertexAttribArray (1); 


glActiveTexture (GL_TEXTUREO) ; 
glBindTexture (GL TEXTURE 2D, brickTexture) ; 


glEnable(GL_DEPTH_ TEST) ; 
glDepthFunc (GL_LEQUAL) ; 


glDrawArrays(GL_TRIANGLES, 0, 18); 


// main() 和 以 前 一 样 
顶点 着 色 器 


#version 430 

layout (location=0) in vec3 pos; 

layout (location=1) in vec2 texCoord; 

out vec2 tc; // 纹理 坐标 输出 到 光栅 着 色 器 用 于 插值 

uniform mat4 mv_matrix; 

uniform mat4 proj matrix; 

layout (binding=0) uniform sampler2D samp; // 项 点， 着 色 器 中 未 使 用 


void main(void) 
{ gl_Position = proj matrix * mv_matrix * vec4(pos,1.0); 
tc = texCoord; 


} 


片段 着 色 器 


#version 430 
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in vec2 tc; // 输入 插值 过 的 材质 坐标 

out vec4 color; 

uniform mat4 mv matrix; 

uniform mat4 proj matrix; 

layout (binding=0) uniform sampler2D samp; 


void main(void) 
{ color = texture(samp, tc); 
} 


5.8 多 级 渐 远 纹理 贴图 


纹理 贴图 经 常会 在 泻 染 图 像 中 产生 各 种 不 期 望 的 伪 影 。 这 是 因为 纹理 图 像 的 分 辨 率 或 长 
宽 比 很 少 与 被 纹理 贴图 的 场景 中 区 域 的 分 辨 率 或 长 宽 比 相 匹配 。 

当 图 像 分 辨 率 小 于 所 绘制 区 域 的 分 辨 率 时 ， 会 出 现 一 种 很 常见 的 伪 影 。 在 这 种 情况 下 ， 
需要 拉 伸 图 像 以 覆盖 整个 区 域 ， 就 会 变 得 模糊 《〈 并 且 可 能 变形 )。 根 据 纹理 的 性 质 ， 有 时 可 
以 通过 改变 纹理 坐标 分 配方 式 来 对 抗 这 种 情况 ， 使 得 纹理 需要 较 少 的 拉 伸 。 另 一 种 解决 方 
案 是 使 用 更 高 分 辨 率 的 纹理 图 像 。 

相反 的 情况 是 当 图 像 纹 理 的 分 辩 率 大 于 被 绘制 区 域 的 分 辩 率 时 。 可 能 并 不 是 很 容易 理解 
为 什么 这 会 造成 问题 ， 但 确实 如 此 ! 在 这 种 情况 下 ， 可 能 会 出 现 明 显 的 登 影 伪 影 ， 从 而 产 
生 奇 怪 的 错误 图 案 ， 或 移动 物体 中 的 “闪烁 ”效果 。 

合影 是 由 采样 错误 引起 的 。 它 通常 与 信号 处 理 有 关 ， 不 充分 采样 的 信号 被 重建 时 ， 看 起 
来 会 具有 和 实际 不 同 的 特性 〈 例 如 波长 )。 例 子 如 图 5.9 所 示 《〈 见 彩 插 )。 原 始 波形 显示 为 红 
色 ， 沿 波形 的 黄 点 代表 采样 点 。 如 果 采 样 点 被 用 于 重建 波形 ， 并 且 采 样 频率 不 足 ， 则 可 能 


人 
en 
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图 5.9 不 充分 采样 造成 的 悉 影 
类 似 地 ， 在 纹理 贴图 中 ， 当 稀疏 地 采样 高 分 辩 率 (和 高 细节 ) 图 像 时 《例如 使 用 统一 采 
样 器 变量 时 )， 提 取 到 的 颜色 将 不 足以 反映 图 像 中 的 实际 细节 ， 而 是 可 能 看 起 来 很 随机 。 如 
果 纹 理 图 像 具 有 重复 图 案 ， 则 合影 可 能 导致 生成 与 原始 图 像 不 同 的 图 案 。 如 果 被 纹理 贴图 
的 对 象 正在 移动 ， 则 纹 素 查 找 中 的 舍 入 误差 可 能 导致 给 定 纹理 坐标 处 的 采样 像素 的 不 断 变 
化 ， 从 而 在 被 绘制 对 象 的 表面 上 产生 不 希望 的 内 烁 效果 。 
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图 5.10 显示 了 一 个 立方 体 项 部 的 倾斜 泻 染 特写 , 该 立方 体 使 用 大 尺寸 高 分 辨 率 棋盘 图 像 
进行 纹理 贴图 。 


7s 





图 $.10 KERFA 

在 图 像 顶 部 附近 明显 发 生 了 混 欠 ,棋盘 的 欠 采 样 产 生 了 “条 纹 ” 效 果 。 虽 然 我 们 无 法 在 | 
静止 图 像 中 展示 ， 但 如 果 这 是 一 个 动画 场景 ， 则 看 起 来 的 图 案 可 能 会 在 各 种 不 正确 的 图 案 | 
(包括 图 示 的 这 一 个 在 内 ) 之 间 波 动 。 

男 一 个 例子 如 图 5.11 所 示 ， 其 中 的 立方 体 已 经 使 用 月 球 表面 的 图 像 喇 19 进 行 纹理 贴图 。 
乍 一 看 ， 这 张 图 片 显得 清晰 而 细节 丰富 。 然 而 ， 图 像 右 上 部 分 的 某 些 细节 是 错误 的 ， 并 且 
当 立 方 体 对 象 〈 或 相机 ) 移动 时 会 导致 “闪烁 “〈 不 吉 的 是 ， 我 们 无 法 在 静止 图 像 中 清楚 
地 显示 闪烁 效果 。) 
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图 5.11 纹理 贴图 中 的 “闪烁 ” 

使 用 多 级 渐 远 纹理 贴图 (Mipmapping) 技术 可 以 在 很 大 程度 上 校正 这 一 类 的 采样 误差 伪 

影 ， 它 需要 用 各 种 分 辨 率 创建 纹理 图 像 的 不 同 版 本 。 然 后 ，OpenGL 使 用 最 适合 正在 处 理 的 

这 一 点 处 的 分 辨 率 的 纹理 图 像 进 行 纹理 贴图 。 更 好 的 是 ， 可 以 为 被 贴图 的 区 域 使 用 最 适合 

的 分 辩 率 的 纹理 图 像 的 平均 颜色 。 多 级 渐 远 纹理 贴图 应 用 于 图 5.10 和 图 5.11 中 的 图 像 的 结 
果 如 图 5.12 所 示 。 
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图 5.12 多 级 渐 远 纹理 贴图 结果 


多 级 渐 远 纹理 贴图 通过 一 种 巧妙 的 机 制 来 工作 , 它 在 纹理 图 像 中 存储 相同 图 像 的 连续 的 
一 系列 较 低 分 辩 率 的 副本 ， 所 用 的 纹理 图 像 比 原始 图 像 大 1/3。 这 是 通过 将 图 像 的 R、G 和 
B 分 量 分 别 存 储 在 纹理 图 像 空间 的 3 个 1/4 中 来 实现 的 ， 然 后 在 剩余 的 1/4 图 像 空间 中 对 于 
同一 图 像 重 复 相当 于 原始 分 辨 率 1/4 的 处 理 。 重 复 该 细 分 直到 剩余 象限 太 小 而 不 包含 任何 有 
用 的 图 像 数 据 。 示 例 图 像 和 生成 的 多 级 渐 远 纹理 的 可 视 化 如 图 5.13 所 示 〈 见 彩 插 )。 





图 5.13 ”为 图 片 生成 多 级 渐 远 纹理 


这 种 将 几 个 图 像 填 充 到 一 个 小 空间 中 的 方法 〈 只 比 存 储 原始 图 像 所 需 的 空间 大 一 点 ) 是 
Mipmapping 得 名 的 原因 。MIP 代表 拉丁 语 Multum In Parvo WSI, AEE “EIRIS AE E E 
有 很 多 东西 ”。 

实际 给 对 象 添 加 纹理 时 ， 可 以 通过 多 种 方式 对 多 级 渐 远 纹理 进行 采样 。 在 OpenGL F, 
可 以 通过 将 GL_ TEXTURE _ MIN FILTER 参数 设置 为 所 需 的 缩小 方法 来 选择 多 级 渐 远 纹理 
的 采样 方式 ， 可 以 选取 以 下 方法 之 一 。 

@ GL NEAREST MIPMAP NEAREST 

选择 具有 与 纹 素 区 域 最 相似 的 分 辩 率 的 多 级 渐 远 纹理 。 然 后 ， 它 获得 所 需 纹 理 坐 标 

@ GL LINEAR MIPMAP NEAREST 

选择 具有 与 纹 素 区 域 最 相似 的 分 辩 率 的 多 级 渐 远 纹理 。 然 后 它 取 最 接近 纹理 坐标 的 
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4 个 纹 素 的 插值 。 这 被 称 为 “线性 过 滤 ”。 

@ GL NEAREST MIPMAP LINEAR 
选择 具有 与 纹 素 区 域 最 相似 的 分 辩 率 的 2 个 多 级 渐 远 纹理 。 然 后 ， 它 从 每 个 多 级 渐 
远 纹理 获取 纹理 坐标 的 最 近 纹 素 并 对 其 进行 插值 。 这 被 称 为 “ 双 线 性 过 滤 ” 

© GL LINEAR MIPMAP LINEAR 
选择 具有 与 纹 素 区 域 最 相似 的 分 辩 率 的 2 个 多 级 渐 远 纹理 。 然 后 ， 它 取 各 自 最 接近 
纹理 坐标 的 4 个 纹 素 ， 并 计算 插值 。 这 被 称 为 “三 线性 过 滤 ” 如 图 5.11 所 示 。 

三 线性 过 滤 通 常 是 比较 好 的 选择 ， 因 为 较 低 的 混合 级 别 通常 会 产生 伪 影 ， 例 如 多 级 渐 远 
纹理 级 别 之 间 的 可 见 分 离 。 图 5.14 显示 了 只 启用 了 线性 过 滤 的 使 用 多 级 渐 远 纹理 的 棋盘 的 
特写 。 请 注意 在 多 级 渐 远 纹理 的 边界 处 垂直 线 突然 从 粗 变 为 细 (图 中 圈 出 的 位 置 的 伪 影 )。 
相 比 之 下 ， 图 5.15 中 的 示例 使 用 了 三 线性 过 滤 。 





图 5.14 ”线性 过 滤 伪 影 图 5.15 三 线性 过 滤 


OpenGL 提供 了 丰富 的 多 级 渐 远 纹理 支持 。 有 一 些 机 制 可 用 于 构建 你 自己 的 多 级 渐 远 纹 
理 级 别 ， 或 者 让 OpenGL 为 你 构建 它们 。 在 大 多 数 情况 下 ，OpenGL 自动 构建 的 多 级 渐 远 纹 
理 已 足够 。 这 是 通过 将 以 下 代码 行 添加 进 getTextureObject0 函 数 之 后 立即 执行 的 Utils:: 
loadTexture() 函 数 〈 前 面 的 5.1 节 中 介绍 过 ) 中 实现 的 : 

glBindTexture (GL TEXTURE 2D, textureID); 


glTexParameteri (GL TEXTURE 2D, GL TEXTURE MIN FILTER, GL LINEAR MIPMAP LINEAR); 
glGenerateMipmap (GL TEXTURE 2D); 


这 通知 OpenGL 生成 多 级 渐 远 纹理 。 使 用 glBindTexture() 调 用 激活 砖 纹 理 ， 然 后 
glTexParameteri() 函数 调用 启用 前 面 列 出 的 缩小 方法 之 一 ， 例 如 上 面 调用 中 显示 的 
GL LINEAR MIPMAP LINEAR， 它 启用 三 线性 过 滤 。 

构建 多 级 渐 远 纹理 后 ， 可 以 通过 再 次 调用 glTexParameteri() 来 更 改过 滤 选 项 (尽管 这 很 
少 需要 )， 例 如 在 display 函数 中 。 甚 至 可 以 通过 选择 GL_NEAREST 或 GL_ LINEAR 来 禁用 
多 级 渐 远 纹理 。 

对 于 关键 应 用 程序 ， 可 以 使 用 您 喜欢 的 任何 图 像 编 辑 软 件 自行 构建 多 级 渐 远 纹理 。 然 后 
可 以 通过 为 每 个 多 级 渐 远 纹理 级 别 重复 调用 OpenGL 的 glTexImage2D() 函 数 来 创建 纹理 对 
象 ， 并 将 它们 添加 为 多 级 渐 远 纹理 级 别 。 对 这 种 方法 的 进一步 讨论 超出 了 本 书 的 范围 。 
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5.9 各 向 异性 过 滤 


多 级 渐 远 纹理 贴图 有 时 看 起 来 比 非 多 级 渐 远 纹理 贴图 更 模糊 , 尤其 是 当 被 贴图 对 象 以 严 
重 倾斜 的 视角 演 染 时 。 我 们 在 图 5.12 中 看 到 了 一 个 这 样 的 例子 ， 使 用 多 级 渐 远 纹理 减少 伪 
影 的 同时 也 减少 了 图 像 细 节 (与 图 5.11 相 比 )。 

这 种 细节 的 丢失 是 因为 当 物 体 倾斜 时 ， 其 基 元 看 起 来 沿 一 个 轴 〈 即 宽度 或 高 度 ) 比 沿 另 
一 个 轴 更 小 。 当 OpenGL 为 图 元 贴图 时 ， 它 选择 适合 两 个 轴 中 较 小 的 轴 的 多 级 渐 远 纹理 (以 
避免 “闪烁 ” 伪 影 )。 在 图 5.12 中 ， 表 面 远 离 观察 者 倾斜 ， 因 此 每 个 泻 染 图 元 将 使 用 适合 其 
更 小 的 高 度 的 多 级 渐 远 纹理 ， 这 可 能 对 其 宽度 来 说 分 辩 率 太 小 了 。 

一 种 恢复 一 些 丢 失 细节 的 方法 是 使 用 各 向 异性 过 滤 (AF)。 标 准 的 多 级 渐 远 纹理 贴图 以 
各 种 正方 形 分 辩 率 〈 例 如 256 像素 X256 像素 、128 像素 X128 像素 等 ) 对 纹理 图 像 进行 采 
样 ， 而 AF 却 以 多 种 矩形 分 辨 率 对 纹理 进行 采样 ， 例 如 256 像素 X128 像素 、64 像素 X 128 
像素 等 。 这 使 得 从 各 种 角度 观看 并 同时 在 纹理 中 保留 尽 可 能 多 的 细节 成 为 可 能 。 

各 向 异性 过 滤 比 标准 多 级 渐 远 纹理 贴图 在 计算 上 代价 更 高 , 并且 不 是 OpenGL 的 必需 部 分 。 
但 是 ， 大 多 数 显卡 都 支持 AF (这 被 称 为 OpenGL 扩展 )， 而 OpenGL 确实 提供 了 一 种 查询 显卡 
是 否 支 持 AF 的 方法 ， 以 及 一 种 访问 AF 的 方法 。 生 成 多 级 渐 远 纹理 贴图 后 立即 添加 代码 : 


// 如 果 启 用 多 级 渐 远 纹理 贴图 

glBindTexture (GL TEXTURE 2D, textureID); 

glTexParameteri(GL_ TEXTURE 2D, GL TEXTURE MIN FILTER, GL LINEAR MIPMAP LINEAR); 
glGenerateMipmap (GL_TEXTURE 2D); 


// 如 果 还 启用 各 向 异性 过 滤 
if (glewIsSupported("GL_EXT_ texture filter_anisotropic")) { 
GLfloat anisoSetting = 0.0f; 
glGetFloatv(GL_MAX TEXTURE MAX ANISOTROPY EXT, &anisoSetting) ; 
glTexParameterf (GL TEXTURE 2D, GL TEXTURE MAX ANISOTROPY EXT, anisoSetting) ; 
} 


对 glewIlsSupported() A‘) Val FH WW ik So KEEL AF. WR SCHR, 我 们 将 其 设置 为 文 持 的 最 
大 采样 程度 ， 这 个 最 大 值 使 用 glGetFloatv0O 获 取 。 然 后 使 用 glTexParameterf() 将 其 应 用 于 激 
活 纹理 对 象 。 结 果 如 图 5.16 所 示 。 请 注意 ， 图 5.11 中 的 大 部 分 丢失 细节 已 经 恢复 ， 同 时 仍 
然 消 除了 内 烁 的 伪 影 。 





图 5.16 各 向 异性 过 滤 
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5.10 ”环绕 和 平 铺 


到 目前 为 止 ， 我们 假设 纹理 坐标 都 落 在 [0...1] 范 围 内 。 但 是 ，OpenGL 实际 上 支持 任何 
取 值 的 纹理 坐标 。 有 几 个 选项 可 以 用 来 指定 当 纹 理 坐 标 超出 范围 [0...1] 时 会 发 生 什么 。 使 用 
glTexParameteri() 设 置 所 需 的 行为 ， 选 项 如 下 。 

© GL REPEAT: 忽略 纹理 坐标 的 整数 部 分 ， 生 成 重复 或 “ 平 铺 ” 图 案 。 这 是 默认 行为 。 

@ GL_MIRRORED REPEAT: 忽略 整数 部 分 ， 但 是 当 整 数 部 分 为 奇数 时 坐标 反 转 ， 

因此 重复 的 图 案 在 正常 和 镜像 之 间 交 替 。 

@ GL CLAMP TO EDGE: 小 于 0 或 大 于 1 的 坐标 分 别 设置 为 0 和 1。 

@ GL CLAMP TO BORDER: 将 [0...1] 以 外 的 纹 素 设置 成 指定 的 边框 颜色 。 

例如 ， 考 虑 一 个 金字 塔 ， 其 纹理 坐标 已 在 [0...5] 范 围 ， 而 不 是 通常 的 [0...1] 范 围 内 定义 。 
默认 行为 (GL _REPEAT),， 使 用 前 面 图 5.2 中 显示 的 纹理 图 像 ， 将 导致 纹理 在 表面 上 重复 五 
次 (有 时 称 为 “ 平 铺 ”)， 如 图 5.17 Pras. 





图 5.17 使 用 GL REPEAT 环绕 的 纹理 坐标 


为 了 使 平 铺 块 的 外 观 在 正常 和 镜像 之 间 交 替 ， 我 们 可 以 指定 以 下 内 容 : 


glTexParameteri (GL TEXTURE 2D, GL TEXTURE WRAP S, GL MIRRORED REPEAT) ; 

glTexParameteri (GL TEXTURE 2D, GL_TEXTURE WRAP_T, GL MIRRORED REPEAT) ; 

通过 将 GL_MIRRORED_ REPEAT 替换 为 GL_CLAMP_TO_EDGE， 可 以 指定 将 小 于 0 
或 大 于 1 的 值 分 别 设置 为 0 和 1。 

可 以 按 如 下 方式 来 指定 小 于 0 或 大 于 1 的 值 输出 “边框 ”颜色 : 

glTexParameteri(GL TEXTURE 2D, GL TEXTURE WRAP S, GL CLAMP TO BORDER); 

glTexParameteri (GL TEXTURE 2D, GL TEXTURE WRAP T, GL CLAMP TO_BORDER); 


float redColor[4] = { 1.0f, 0.0f, 0.0f, 1.0f }; 
glTexParameterfv(GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, redColor) ; 


图 5.18〈 见 彩 插 ) 中 分 别 〈 从 左 到 右 ) SAS TREAT CHER EL RR BIA AIK 
紧 到 边框 ) 的 效果 ， 纹 理 坐 标 范围 为 -2 一 +3。 
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图 5.18 ”使 用 不 同 环绕 选项 的 金字 塔 材质 贴图 


在 中 间 的 示例 ( 夹 紧 到 边缘 ) 中 , 沿 纹理 图 像 边缘 的 像素 向 外 复制 。 注意 ， 作 为 副作用 ， 
金字 塔 面 的 左下 和 右 下 区 域 分 别 从 纹理 图 像 的 左下 和 右 下 像素 获得 它们 的 颜色 。 


5.11 透视 变形 


我 们 已 经 看 到 ， 当 纹理 坐标 从 顶点 着 色 器 传递 到 片段 着 色 器 时 ， 它 们 通过 光栅 着 色 器 并 
被 插值 。 我 们 还 看 到 ， 这 是 自动 线性 插值 的 结果 ， 总 是 在 项 点 属性 上 执行 。 

然而 ， 在 纹理 坐标 的 情况 下 ， 线 性 插值 可 能 导致 具有 透视 投影 的 3D 场景 中 的 可 以 察觉 
的 失真 。 

考虑 一 个 由 两 个 三 角形 组 成 的 矩形 ， 纹 理 贴图 是 棋盘 图 像 ， 面 向 相机 。 当 和 矩形 围绕 X 
轴 旋 转 时 ， 和 矩形 的 顶部 会 倾斜 并 远离 相机 ， 而 矩形 的 下 半 部 分 则 更 靠近 相机 。 因 此 ， 我 们 
希望 顶部 的 方块 变 小 ， 底 部 的 方块 变 大 。 但 是 ,纹理 坐标 的 线性 插值 将 导致 所 有 正方 形 的 
高 度 相等 。 沿 着 构成 矩形 的 两 个 三 角形 之 间 的 对 角 线 的 失真 加 剧 。 产 生 的 失真 如 图 5.19 
所 示 。 

幸运 的 是 ， 存 在 用 于 校正 透视 失真 的 算法 ， 并 且 默 认 情 况 下 ，OpenGL 在 光栅 化 期 间 会 
应 用 透视 校正 算法 [oz 。 图 5.20 显示 了 由 OpenGL 正确 呈现 的 相同 的 旋转 棋盘 。 





图 $.19 ”纹理 透视 失真 图 5.20 OpenGL 透视 校正 


虽然 不 常见 ， 但 可 以 通过 在 包含 纹理 坐标 的 顶点 属性 的 声明 中 添加 关键 字 
“noperspective” 来 禁用 OpenGL 的 透视 校正 。 必 须 在 顶点 着 色 器 和 片段 着 色 器 中 都 这 样 添 
加 。 例 如 ， 顶 点 着 色 器 中 的 顶点 属性 将 声明 如 下 : 


noperspective out vec2 texCoord; 
片段 着 色 器 中 的 相应 属性 声明 : 


noperspective in vec2 texCoord; 
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实际 上 ， 我 使 用 了 这 种 语法 来 生成 图 5.19 中 的 扭曲 棋盘 格 。 





5.12 ”材质 更 多 OpenGL 细节 


我 们 在 本 书 中 使 用 的 SOIL2 纹理 图 像 加 载 库 具有 使 用 起 来 相对 简单 和 直观 的 优点 。 但 
是 ， 在 学 习 OpenGL 时 ， 使 用 SOIL2 会 产生 一 项 我 们 不 想 要 的 后 果 ， 即 用 户 会 接触 不 到 一 
些 有 用 的 重要 OpenGL 细节 。 在 本 节 中 ， 我 们 将 描述 程序 员 在 没有 纹理 加 载 库 (如 SOIL2) 
的 情况 下 加 载 和 使 用 纹理 时 需要 了 解 的 一 些 细节 。 

可 以 使 用 C++ 和 OpenGL 函数 直接 将 纹理 图 像 文件 数据 加 载 到 OpenGL 中 。 虽然 它 有 点 
复杂 ， 但 并 不 少见 。 一 般 步 又 如 下 。 

C1) 使 用 C++ 工具 读 取 图 像 文件 。 

(2) 生成 OpenGL 纹理 对 象 。 

(3) 将 图 像 文 件数 据 复制 到 纹理 对 象 中 。 

我 们 不 页 
na) 中 很 好 地 描述 了 一 种 方法 ， 并 使 用 C++ 函数 fopen0 和 fread() 将 数据 从 .bmp 图 像 文件 
读 入 unsigned char 类 型 的 数组 中 。 

步骤 2 和 步骤 3 更 通用 ， 主 要 涉及 OpenGL 调用 。 在 第 2 步 中 ， 我 们 使 用 OpenGL 的 
glGenTextures() 命 令 创 建 一 个 或 多 个 纹理 对 象 。 例 如 ， 生 成 单个 OpenGL 纹理 对 象 〈 使 用 整 
型 引用 ID) 可 以 按 如 下 方式 完成 : 

GLuint textureID; // 或 者 GLuint 类 型 的 数组 ， 如 果 需 要 创建 多 于 一 个 纹理 对 象 

glGenTextures(1, stextureID); 

在 步骤 3 中 ， 我 们 将 步骤 1 中 的 图 像 数 据 关 联 到 步骤 2 中 创建 的 纹理 对 象 。 这 是 使 用 
OpenGL 的 glTexImage2D0O 命 令 完成 的 。 下 面 的 示例 将 图 像 数据 从 步骤 1 中 描述 的 unsigned 
char 数组 〈 此 处 表示 为 “data”) 加 载 到 步骤 2 中 创建 的 纹理 对 象 中 : 

glBindTexture (GL_TEXTURE | 2D, textureID) 


glTexImage2D(GL_TEXTURE_2D, 0,GL_RGB, width, height, 0, GL BGR, 
GL_UNSIGNED BYTE, data); 


此 时 ， 本 章 前 面 介 绍 的 用 于 设置 多 级 渐 远 纹理 贴图 等 的 各 种 glTexParameteriO 调 用 也 可 
以 应 用 于 纹理 对 象 。 我 们 现在 也 以 与 本 章 所 述 相同 的 方式 使 用 整 型 引用 (textureID)。 


补充 说 明 


研究 人 员 开 发 了 纹理 单元 的 许多 用 途 ， 不 仅仅 是 场景 中 的 纹理 模型 。 在 后 面 的 章节 中 ， 
我 们 将 看 到 如 何 使 用 纹理 单元 来 改变 物体 反射 光线 的 方式 ， 使 其 看 起 来 凹凸 不 平 。 我 们 还 
可 以 使 用 纹理 单元 来 存储 “高 度 图 ”以 生成 地 形 ， 以 及 存储 “阴影 贴图 ”以 有 效 地 为 场景 
添加 阴影 。 这 些 用 途 将 在 后 续 章节 中 描述 。 

着 色 器 还 可 以 向 纹理 写 入 数据 ， 允 许 着 色 器 修改 纹理 图 像 ， 甚 至 将 一 个 纹理 的 一 部 分 复 
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制 到 另 一 个 纹理 的 某 个 部 分 。 

多 级 渐 远 纹理 贴图 和 各 向 异性 过 滤 不 是 减少 纹理 中 的 亚 影 伪 影 的 唯一 工具 。 例如 , 全屏 搞 
4% (Full-scene anti-aliasing, FSAA) 和 其 他 超 采 样 方法 也 可 以 改善 3D 场景 中 纹理 的 外 观 。 
虽然 不 是 OpenGL 核心 的 一 部 分 ,但 它们 通过 OpenGL 的 扩展 机 制 [om 在 许多 显卡 上 得 到 支持 。 

还 有 一 种 用 于 配置 和 管理 纹理 和 采样 器 的 替代 机 制 。OpenGL 3.3 版 引入 了 采样 器 对 象 
(有 时 称 为 “采样 器 状态 ” 不 要 与 采样 器 变量 混淆 )， 可 用 于 保存 一 组 独立 于 实际 纹理 对 
象 的 纹理 设置 。 采 样 器 对 象 附 加 到 纹理 单元 ， 可 以 方便 有 效 地 更 改 纹理 设置 。 本 教材 中 显 
示 的 示例 非常 简单 ， 我 们 决定 暂 不 介绍 采样 器 对 象 。 对 于 感 兴趣 的 读者 ， 采 样 器 对 和 象 的 使 
用 很 容易 学 习 ， 并 且 有 许多 优秀 的 在 线 教 程 〈 例 如 km)。 





习题 
5.1 如 5.11 节 所 述 ， 通 过 在 纹理 坐标 顶点 属性 中 添加 “noperspective” 声 明 来 修改 程序 


5.1。 然 后 重新 运行 程序 并 将 输出 与 原始 输出 进行 比较 。 是 否 有 任何 明显 的 透视 变形 ? 

5.2 ”使 用 简单 的 “画图 ”程序 (如 Windows“ 画 图 ”或 GIMP' Sn1)， 绘 制 自己 设计 的 手 
绘画 面 。 然 后 使 用 您 的 图 像 在 程序 5.1 中 为 金字 塔 添加 纹理 贴图 。 

5.3 (RA) 修改 程序 4.4, 使 “太阳 ”“ 行 星 ” 和 “月 亮 ” 具有 纹理 。 您 可 以 继续 使 用 
已 存在 的 形状 ， 也 可 以 使 用 任何 您 喜欢 的 纹理 。 通 过 搜索 一 些 发 布 的 代码 示例 可 以 获得 立 
方 体 的 纹理 坐标 ， 或 者 您 可 以 手动 构建 它们 〈 尽 管 这 有 点 单调 乏味 )。 
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第 6 章 3D 模型 


到 目前 为 止 ， 我 们 只 处 理 了 非常 简单 的 3D 对 象 ， 例 如 立方 体 和 金字 塔 。 这 些 对 象 非常 
简单 ， 我 们 能 够 在 源 代码 中 明确 列 出 所 有 项 点 信息 ， 并 将 其 直接 放 入 缓冲 区 。 

然而 ， 大 多 数 有 趣 的 3D 场景 包括 的 对 象 过 于 复杂 ， 使 得 我 们 无 法 像 之 前 那样 继续 手工 构 
建 它 们 。 在 本 章 中 ， 我 们 将 探索 更 复杂 的 对 象 模型 ， 以 及 如 何 构建 并 将 它们 加 载 到 场景 中 。 

3D 建 模 本 身 就 是 一 个 广阔 的 领域 ， 我 们 在 这 里 讲 到 的 必然 非常 有 限 。 我 们 将 重点 关注 
以 下 两 个 主题 : 

o 通过 程序 来 构建 模型 ; 

@ ”加 载 外 部 创建 的 模型 。 

虽然 这 只 涉及 丰富 的 3D 建 模 领域 中 非常 浅 层 的 部 分 ， 但 它 将 使 我 们 能 够 在 场景 中 包含 
各 种 复杂 和 逼真 的 细节 对 象 。 


6.1 程序 构建 模型 





构建 一 个 球体 


某 些 类 型 的 对 象 〈 例 如 球体 、 圆 锥 体 等 ) 具有 数学 定义 ， 这 些 定义 有 助 于 算法 生成 。 例 
如 ， 对 于 半径 为 尺 的 圆 ， 围 绕 其 圆周 的 点 的 坐标 可 以 被 很 好 地 定义 〈 见 图 6.1)。 


(Reos@, Rsin@) 





图 6.1 构成 圆周 的 点 


我 们 可 以 系统 地 使 用 圆 的 几何 知识 来 通过 算法 建立 球体 模型 。 我 们 的 策略 如 下 。 

C1) 在 整个 球体 上 ， 选 择 表示 一 系列 圆 形 “水 平 切片 ”的 精度 。 见 图 6.2 的 左 侧 。 

(2) 将 每 个 圆 形 切片 的 圆周 细 分 为 若干 个 点 。 见 图 6.2 的 右 侧 。 更 多 的 点 和 水 平 切片 可 
以 生成 更 精确 、 更 平滑 的 球体 模型 。 在 我 们 的 模型 中 ， 每 个 切片 将 具有 相同 数量 的 点 。 

(3) 将 顶点 分 组 为 三 角形 。 一 种 方法 是 逐步 遍历 顶点 , 在 每 一 步 构 建 两 个 三 角形 。 例如 ， 
当 我 们 沿 着 图 6.3 中 球体 上 5 个 彩色 顶点 这 一 行 移动 时 ， 对 于 这 5 个 顶点 中 的 每 一 个 , 我们 
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构建 了 以 相应 颜色 显示 的 两 个 三 角形 〈 见 彩 插 ， 下 面 将 更 详细 地 描述 这 些 步骤 )。 


er i 
S-E 
> maaan SS 一 


图 6.2 ”构建 圆 形 项 点 





UIER EE) 








图 6.3 将 项 点 组 合成 三 角形 


(4) 根据 纹理 图 像 的 性 质 选 择 纹理 坐标 。 在 
球体 的 情况 下 ， 存 在 许多 地 形 纹理 图 像 ， 假 设 
我 们 选择 这 种 纹理 图 像 ， 想 象 一 下 ， 让 这 个 图 
RAGE A “FUE”, 我 们 可 以 根据 图 像 中 纹 素 
的 最 终 对 应 位 置 为 每 个 顶点 指定 纹理 坐标 。 

(5) 对 于 每 个 顶点 , 通常 还 希望 生成 法 向 量 
(Normal Vector) 一 一 垂直 于 模型 表面 的 向 量 。 
我 们 将 很 快 在 第 7 章 中 将 它们 用 于 光照 。 

确定 法 向 量 可 能 很 棘手 , 但 是 在 球体 的 情况 
下 ， 从 球体 中 心 指向 顶点 的 向 量 恰好 等 于 该 顶 
点 的 法 向 量 ! 图 6.4 说 明了 这 个 特点 (球体 的 中 
心 用 “ 星 形 ” 表 示 )。 


图 6.4 球体 顶点 法 向 量 


一 些 模型 使 用 索引 定义 三 角形 。 请 注意 ， 在 图 6.3 中 ， 每 个 顶点 出 现在 多 个 三 角形 中 ， 
这 将 导致 每 个 顶点 被 多 次 指定 。 我 们 不 希望 这 样 做， 而 是 会 存储 每 个 顶点 一 次 ， 然 后 为 三 
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角形 的 每 个 角 指 定 索 引 ， 引 用 所 需 的 项 点。 我 们 需要 存储 每 个 项 点 的 位 置 、 纹 理 坐 标 和 法 
向 量 ， 因 此 这 么 做 可 以 为 大 型 模型 节省 内 存 。 

顶点 存储 在 一 维 数组 中 ， 从 最 下 面 的 水 平 切片 中 的 顶点 开始 。 使 用 索引 时 ， 关 联 的 索引 
数组 包括 每 个 三 角形 角 的 条 目 。 其 内 容 是 顶点 数组 中 的 整 型 引用 (具体 地 说 ， 是 下 标 )。 假 
设 每 个 切片 包含 2 个 顶点 ， 顶 点 数组 以 及 相应 索引 数组 的 示例 部 分 ， 如 图 6.5 所 示 。 


jt*vertex in itt slice 


slice #0 i® slice (i+ 1)” slice 


volva |r|- [Pma | [Pari | Horio [Parina Vani Paren ares | Paras | 








顶点 数组 / 
a [eh [rea rea pea nao 
索引 数组 — m 


triangle ¢ triangle t+1 
图 6.5 ”顶点 数组 和 相应 的 索引 数组 
然后 ， 我 们 可 以 从 球体 底部 开始 ， 围 绕 每 个 水 平 切片 以 圆 形 方式 裔 历 顶点 。 当 我 们 访问 
每 个 顶点 时 ， 我 们 构建 两 个 三 角形 ， 在 其 右上 方形 成 一 个 方形 区 域 ， 如 图 6.3 所 示 。 我 们 将 
整个 处 理 过 程 组 织 成 嵌 套 循环 ， 如 下 所 示 。 


对 于 球体 中 的 每 个 水 平 切片 i G 的 取 值 从 0 到 球体 中 的 所 有 切片 ) 
{ ”对 于 切片 i 中 的 每 个 项 点 j (j 的 取 值 从 0 到 切片 中 的 所 有 项 点 ) 

{ 计算 项 点 j 的 指向 右边 相 邻 项 点、 上方 顶 点 ， 以 及 右上 方 顶点 的 两 个 三 角形 的 索引 
anes 


例如 ,考虑 图 6.3 中 的 “红色 ”顶点 (图 6.6 vertex[(i+1)*n+j] vertex[(i+1)*n+tj+1] 


中 重复 出 现 )。 这 个 顶点 位 于 图 6.6 所 示 的 黄色 O S O 
r 








三 角形 的 左下 方 ， 按 照 我 们 刚刚 描述 的 循环 ， 
它 的 索引 序号 是 i#znty， 其 中 i 是 当前 正在 处 理 
的 切片 (外 循环 ), j 是 当前 正在 该 切片 中 处 理 的 i | 
顶点 (内 循环 )，n 是 每 个 切片 的 项 点数。 图 6.6 fa 
显示 了 这 个 顶点 〈 红 色 ) 以 及 它 的 3 个 相关 的 vertex[i*n+j] — vertex[/*n+j+1] 
相 邻 顶点 〈 见 彩 插 )， 每 个 顶点 都 有 公式 显示 它 图 6.6 第 i 个 切片 中 的 第 j 个 顶点 的 索引 序号 
们 的 索引 序号 。 (n= 每 个 切片 的 顶点 数 ) 
然后 使 用 这 4 个 顶点 构建 为 此 (红色) 顶点 生成 的 两 个 三 角形 (以 黄色 显示 )。 这 两 个 
三 角形 的 索引 表 中 的 6 个 条 目 在 图 中 以 数字 1 一 6 的 顺序 表示 。 注 意 ， 条 目 3 和 6 都 指向 相 
同 的 顶点 , 对 于 条 目 2 和 4 也 是 如 此 。 当 我 们 到 达 以 红色 突出 显示 的 顶点 〈 即 vertex[i*ntj]) 
时 由 此 定义 的 两 个 三 角形 是 由 这 6 个 顶点 构成 的 一 一 其 中 一 个 三 角形 的 条 目标 记 为 1、2、3， 
引用 的 顶点 包括 vertex[i*n+j]. vertex[i*ntj+1]#l vertex[(i+1)*ntj/]; 另 一 个 三 角形 的 条 目标 
记 为 4、5、6， 引 用 的 顶点 包括 vertex[i*ntj+1]. vertex[(i+1)*ntj+1]#ll vertex[(i+1)*n+j]. 
程序 6.1 显示 了 我 们 的 球体 模型 的 实现 ， 类 名 为 Sphere。 生 成 的 球体 的 中 心 位 于 原点 。 
这 里 还 显示 了 使 用 Sphere 的 代码 。 请 注意 ， 每 个 顶点 都 存储 在 包含 GLM 类 vec2 和 vec3 实 
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例 的 C++ 向 量 中 《〈 这 与 之 前 的 示例 不 同 ， 之 前 顶点 存储 在 浮 点 数组 中 )。vec2 和 vec3 包括 
了 获得 所 需 的 x、y 和 z 分 量 浮 点 值 的 方法 ， 然 后 就 可 以 如 前 所 述 将 它们 放 入 浮 点 缓冲 区 。 
我 们 将 这 些 值 存储 在 可 变 长 度 C++ 向 量 中 ， 因 为 长 度 取决 于 运行 时 指定 的 切片 数 。 

请 注意 Sphere 类 中 三 角形 索引 的 计算 ， 如 前 面 的 图 6.6 所 述 。 变 量 “prec(precision)” 指 
的 是 “精度 ”， 在 这 里 它 被 用 来 确定 球形 切片 的 数量 和 每 个 切片 中 的 顶点 数量 。 因 为 纹理 贴 
图 完全 包 囊 在 球体 周围 ， 所 以 在 纹理 贴图 的 左右 边缘 相交 的 每 个 点 处 需要 一 个 额外 的 重合 
顶点 。 因 此 ， 顶 点 的 总 数 是 (prect+1)*(prec+1)。 由 于 每 个 顶点 生成 6 个 三 角形 索引 ， 因 此 索 
引 的 总 数 是 prec*prec*6。 


程序 6.1 程序 生成 的 球体 
球体 类 (Sphere.cpp) 


#include <cmath> 
#include <vector> 
#include <iostream> 
#include <glm\glm.hpp> 
#include "Sphere.h" 
using namespace std; 


Sphere::Sphere() { 
init (48); 
} 


Sphere::Sphere(int prec) { // prec 是 精度 ， 也 就 是 切片 的 数量 
init (prec) ; 


} 
float Sphere: :toRadians(float degrees) { return (degrees * 2.0f * 3.14159f) / 360.0f; } 


void Sphere::init(int prec) { 
numVertices = (prec + 1) * (prec + 1); 
numIndices = prec * prec * 6; 
// std::vector::push_back() 在 向 量 的 末尾 增加 一 个 新 元 素 ， 并 为 向 量 长 度 加 1 
for (int i = 0; i < numVertices; i++) { vertices.push_back(glm::vec3()); } 
for (int i = 0; i < numVertices; i++) { texCoords.push_back(glm::vec2()); } 
for (int i = 0; i < numVertices; i++) { normals.push_back(glm::vec3()); } 
for (int i = 0; i < numIndices; i++) { indices.push_back(0); } 


// 计算 三 角形 顶点 
for (int i = 0; i <= prec; it+) { 
for (int j = 0; j <= prec; j++) { 
float y = (float) cos(toRadians(180.0f - i * 180.0f / prec)); 


float x = -(float)cos(toRadians(j*360.0f / prec)) * (float) abs(cos(asin(y))); 
float z = (float) sin(toRadians(j*360.0f / prec)) * (float)abs(cos(asin(y))); 
vertices[i*(prec + 1) + j] = glm::vec3(x, y, z); 

texCoords[i* (prec + 1) + j] = glm::vec2(((float)j / prec), ((float)i / prec)); 


normals[i*(prec + 1) + j] = glm::vec3(x,y,z); 
} 


// 计算 三 角形 索引 
for (int i = 0; i<prec; i++) { 
for (int j = 0; j<prec; j++) { 
indices[6 * (i*prec + j) + 0] = i*(prec + 1) + j; 
indices[6 * (i*prec + j) + 1] = i*(prec + 1) + 4 + 1; 
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indices[6 
indices [6 
indices [6 
indices [6 


// 读 取 函 数 
int Sphere::getNumVertices() { return numVertices; } 
int Sphere::getNumIndices() { return numIndices; } 


std::vector<int> 

std::vector<glm:: 
std::vector<glm:: 
std::vector<glm:: 


球体 头 文件 (Sphere.h) 


#include <cmath> 
#include <vector> 
#include <glm\glm.hpp> 


class Sphere 


{ 


private: 


int 
int 


std: 
std: 
std: 
std: 


numVertices; 
numIndices; 

:vector<int> 
:vector<glm: 
:vector<glm: 
:vector<glm: 


void init (int); 
float toRadians(float degrees) ; 
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* (i*prec + j) + 2] = (i + 1)*(prec + 1) + j; 

* (i*pree + j) + 3] = i*(pree + 1) + 4 + ly 

* (i*prec +'4) + 4] = (i + 1)*(prec + 1) + 3 + 1; 
* (i*prec. + j) + 5] = (i + 1)*(prec + 1) Hi7 


Sphere: :getIndices() { return indices; } 

vec3> Sphere::getVertices() { return vertices; } 
vec2> Sphere::getTexCoords() { return texCoords; 
vec3> Sphere::getNormals() { return normals; } 


indices; 


:vec3> vertices; 
:Vec2> texCoords; 
:vec3> normals; 


getIndices(); 

vec3> getVertices(); 
vec2> getTexCoords(); 
vec3> getNormals(); 


public: 
Sphere(int prec); 
int getNumVertices(); 
int getNumIndices(); 
std::vector<int> 
std: :vector<glm:: 
std: :vector<glm:: 
std: :vector<glm:: 

}; 

使 用 球体 类 


#include "Sphere.h" 


Sphere 


mySphere (48) ; 


void setupVertices(void) { 


std: 
std: 
std: 
std: 


std: 
std: 
std: 


:Vector<int> ind = mySphere.getIndices(); 
:vector<glm::vec3> vert = mySphere.getVertices(); 
:vector<glm::vec2> tex = mySphere.getTexCoords (); 
:vector<glm::vec3> norm = mySphere.getNormals(); 
:vector<float> pvalues; // 顶点 位 置 
:Vector<float> tvalues; // 纹理 坐标 


:vector<float> nvalues; // 法 向 量 





a  ——— as 


了 
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int numIndices = mySphere.getNumIndices (); 
for (int i = 0; i < numIndices; i++) { 
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pvalues.push_back( (vert [ind[i]]).x); 
pvalues.push_back((vert[ind[i]]).y); 
pvalues.push_back((vert[ind[i]]).z); 
tvalues.push_back((tex[ind[i]]).s); 
tvalues.push_back((tex[ind[i]]).t); 


nvalues.push_back((norm[ind[i]]) 
nvalues.push_back((norm[ind[i]]).y); 
nvalues.push_back((norm[ind[i]]).z 











} 


glGenVertexArrays(1, vao); 
glBindVertexArray (vao[0]); 
glGenBuffers (3, vbo); 


// 把 项 点 放 入 缓冲 区 #0 
glBindBuffer (GL ARRAY BUFFER, vbo[0]); 
glBufferData(GL_ARRAY BUFFER, pvalues.size()*4, &pvalues[0], GL_STATIC_DRAW) ; 


// 把 纹理 坐标 放 入 缓冲 区 #1 
glBindBuffer (GL ARRAY BUFFER, vbo[1]); 
glBufferData(GL_ARRAY BUFFER, tvalues.size()*4, &tvalues[0], GL_STATIC_DRAW) ; 





// 把 法 向 量 放 入 缓冲 区 #2 

glBindBuffer (GL ARRAY BUFFER, vbo[2]); 

glBufferData(GL_ARRAY BUFFER, nvalues.size()*4, &nvalues[0], GL_STATIC_DRAW); 
} 


# display () 


glDrawArrays (GL TRIANGLES, 0, mySphere.getNumIndices()); 


使 用 Sphere 类 时 ， 每 个 顶点 位 置 和 法 向 量 需 要 3 个 值 ， 但 每 个 纹理 坐标 只 需要 两 个 值 。 
这 反映 在 Sphere.h 文件 中 显示 的 向 量 (vertices、texCoords 和 normals) 的 声明 中 ， 稍 后 数据 
从 这 些 向 量 中 加 载 到 缓冲 区 中 。 

值得 注意 的 是 ， 虽 然 在 构建 球体 的 过 程 中 使 用 了 索引 ， 但 存储 在 VBO 中 的 最 终 球 体 顶 
点 数据 不 使 用 索引 。 相 反 ， 当 setupVertices() 循 环 遍 历 球体 索引 时 ， 它 会 在 VBO 中 为 每 个 索 
引 条 目 生 成 单独 的 (通常 是 见 余 的 ) 顶点 条 目 。OpenGL 确实 有 一 种 索引 顶点 数据 的 机 制 ; 
为 简单 起 见 ， 我 们 在 此 示例 中 没有 使 用 它 ， 但 我 们 将 在 下 一 个 示例 中 使 用 OpenGL 的 索引 。 

从 几何 形状 到 现实 世界 的 物体 ， 使 用 程序 
的 方式 可 以 创建 许多 其 他 的 模型 。 其 中 最 著名 
HDE “RE” O, Æ 1975 年 由 马 
T + AUER (Martin Newell) 开发 ， 使 用 各 种 
贝 塞 尔 曲线 和 曲面 。OpenGL Utility Toolkit (或 
“GLUT”) 5 其 至 包括 了 绘制 茶壶 的 程序 ( 见 
图 6.7)。 我 们 在 本 书 中 没有 涉及 GLUT, {EI 
塞 尔 曲面 将 在 第 11 章 中 介绍 。 





图 6.7 OpenGL GLUT 茶 过 


94 第 6 章 3D 模型 


个 环 面 





6.2.1 环 面 


用 于 产生 环 面 的 算法 可 以 在 各 种 网 站 上 找到 。Paul Baker 逐步 描述 了 定义 圆 形 切片 ， 然 
后 围绕 圆圈 旋转 切片 以 形成 环 面 的 方法 挛 " 1)。 图 6.8 显示 了 侧面 和 上 面 的 两 种 视图 。 





图 6.8 构建 一 个 环 面 


生成 环 面 顶 点 位 置 的 方式 与 构建 球体 的 方式 有 很 大 不 同 。 对 于 环 面 ， 算 法 将 一 个 项 
点 定位 到 原点 的 右 侧 , 然后 在 XY 平面 上 的 圆 中 让 这 个 顶点 围绕 Z 轴 旋转 , 以 形成 < 环 ”。 
然后 ， 将 这 个 环 “ 向 外 ”移动 “内 半径 ”那么 长 的 距离 。 在 构建 这 些 顶 点 时 ， 为 每 个 
顶点 计算 纹理 坐标 和 法 向 量 。 还 会 额外 为 每 个 顶点 生成 与 环 面 表 面相 切 的 向 量 〈 称 为 
切 向 量 )。 

围绕 了 轴 旋转 最 初 的 这 个 环 ， 形 成 用 来 构成 环 面 的 其 他 环 的 项 点。 通过 围绕 了 轴 旋 转 最 
初 的 环 的 切 向 量 和 法 向 量 来 计算 每 个 结果 顶点 的 切 向 量 和 法 向 量 。 在 顶点 创建 之 后 ， 逐 个 
环 地 遍历 所 有 顶点 ， 并 且 对 于 每 个 顶点 生成 两 个 三 角形 。 两 个 三 角形 的 六 个 索引 表 条 目的 
生成 方式 和 之 前 的 球体 类 似 。 

我 们 为 剩余 的 环 选择 纹理 坐标 的 策略 ,是 将 它们 排列 成 使 得 纹理 图 像 的 8 轴 环 绕 环 面 的 
水 平 周边 的 一 半 ， 然 后 再 对 另 一 半 重 复 。 当 我 们 绕 Y 轴 旋 转生 成 环 时 ， 我 们 指定 一 个 从 1 
开始 并 增加 到 指定 精度 的 变量 环 (再 次 称 为 “prec”)。 然 后 我 们 将 S 纹理 坐标 值 设 置 为 
ring*2.0/prec， 使 S 的 取 值 范围 介 于 0.0 和 2.0 之 间 ， 然 后 每 当 纹理 坐标 大 于 1.0 时 减 去 1.0. 
这 种 方法 的 动机 是 避免 纹理 图 像 在 水 平方 向 上 过 度 “ 拉 伸 ”。 反之， 如 果 我 们 确实 希望 纹理 
完全 围绕 环 面 拉 伸 ， 我 们 只 须 从 纹理 坐标 计算 中 删除 “*2.0” 乘 数 即 可 。 

在 C+HOpenGL 中 构建 Torus 类 可 以 用 与 Sphere 类 几乎 完全 相同 的 方式 完成 。 但 是 ,我 
们 有 机 会 利用 OpenGL 对 顶点 索引 的 支持 来 利用 我 们 在 构建 环 面 时 创建 的 索引 我 们 也 可 
以 为 球体 做 到 这 一 点 ， 但 我 们 没有 这 样 做 )。 对 于 具有 数 千 个 顶点 的 超大 型 模型 ， 使 用 
OpenGL 索引 可 以 提高 性 能 ， 因 此 我 们 将 描述 如 何 执行 此 操作 。 
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6.2.2 OpenGL 中 的 索引 


在 我 们 的 球体 和 环 面 模型 中 ， 我 们 生成 一 个 引用 顶点 数组 的 整 型 索引 数组 。 在 球体 的 情 
况 下 ， 我 们 使 用 索引 列表 来 构建 一 组 完整 的 单个 顶点 ， 并 将 它们 加 载 到 VBO 中 ， 就 像 我 们 
在 前 面 章节 的 示例 中 所 做 的 那样 。 实 例 化 环 面 并 将 其 项 点、 法 向 量 等 加 载 到 缓冲 区 中 可 以 
采用 与 程序 6.1 中 类 似 的 方式 完成 ， 但 我 们 将 使 用 OpenGL 的 索引 。 

使 用 OpenGL 索引 时 , 我 们 还 需要 将 索引 本 身 加 载 到 VBO 中 。 我 们 生成 一 个 额外 的 VBO 
用 于 保存 索引 。 由 于 每 个 索引 值 只 是 一 个 整 型 引用 , 我 们 首先 将 索引 数组 复制 到 整 型 的 C++ 
向 量 中 ， 然 后 使 用 glBufferData() 将 向 量 加 载 到 新 增 的 VBO 中 ， 指 定 VBO 的 类 型 为 
GL ELEMENT ARRAY BUFFER (这 会 告诉 OpenGL 这 个 VBO 包含 索引 )。 执 行 此 操作 的 
代码 可 以 添加 到 setup Vertices(): 


std::vector<int> ind = myTorus.getIndices(); // 环 面 索引 的 读 取 函 数 返 回 整 型 向 量 类 型 的 索引 


glBindBuffer (GL ELEMENT ARRAY BUFFER, vbo[3]); // vbo #3 是 新 增 的 VBO 
glBufferData (GL ELEMENT ARRAY BUFFER, ind.size()*4, &ind[0], GL STATIC DRAW); 


在 display() 方 法 中 ， 我 们 将 glDrawArraysO 调 用 替换 为 gIDrawElements() 调 用 ， 它 告 i 
OpenGL 利用 索引 VBO 来 查找 要 绘制 的 顶点 。 我 们 还 使 用 glBindBuffer() 启 用 包含 索引 的 
VBO, 指定 哪个 VBO 包含 索引 并 且 是 GL _ELEMENT_ARRAY BUFFER 类 型 。 代码 如 下 : 

numTorusIndices = myTorus.getNumIndices (); 


glBindBuffer (GL ELEMENT ARRAY BUFFER, vbo[3]); 
glDrawElements(GL_TRIANGLES, numTorusIndices, GL UNSIGNED INT, 0); 


有 趣 的 是 ， 即 使 我 们 在 C++/OpenGL 应 用 程序 中 进行 了 更 改 ， 实 现 了 索引 ， 用 于 绘制 球 
体 的 着 色 器 对 于 环 面 来 说 仍然 可 以 继续 工作 , 不 需要 修改 .OpenGL 能 够 识别 GL ELEMENT _ 
ARRAY BUFFER 的 存在 并 利用 它 来 访问 顶点 属性 。 

程序 6.2 显示 了 一 个 基于 Baker 实现 的 名 为 Torus 的 类 。“ 内 ”和 “外 ”变量 指 的 是 图 6.9 
中 相应 的 内 半径 和 外 半径 。prec 变量 具有 与 球体 类 似 的 作用 , 对 顶点 数量 和 索引 数量 进行 类 
似 的 计算 。 相 比 之 下 , 确定 法 向 量 比 使 用 球体 复杂 得 多 。 我们 使 用 了 Baker 描述 中 给 出 的 策 
as, 其 中 计算 了 两 个 切 问 量 (Baker 称 为 sTangent 和 tTangent, 尽管 通常 称 为 < 切 向 量 (tangent)” 
和 “ 副 切 向 量 (bitangent)”， 它 们 的 又 乘积 形成 法 向 量 。 

在 本 书 的 其 余部 分 中 ， 我 们 将 在 许多 示例 中 使 用 此 环 面 类 《以 及 前 面 描述 的 球体 类 )。 


程序 6.2 程序 生成 的 环 面 


Torus 类 (Torus.cpp) 


#include <cmath> 
#include <vector> 
#include <iostream> 
#include "Torus.h" 
using namespace std; 


Torus::Torus() { 
prec = 48; 
inner = 0.5f; 
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outer = 0.2f; 
jnit(); 


Torus::Torus(float innerRadius, float outerRadius, int precIn) { 
prec = precIn; 
inner = innerRadius; 
outer = outerRadius; 
init(); 


float Torus::toRadians(float degrees) { return (degrees * 2.0f * 3.14159f) / 360.0f; } 
void Torus::init() { 


numVertices = (prec + 1) * (prec + 1); 
numIndices = prec * prec * 6; 


for (int i = 0; i < numVertices; i++) { vertices.push_back(glm::vec3()); } 
for (int i = 0; i < numVertices; i++) { texCoords.push_back(glm::vec2()); } 
for (int i = 0; i < numVertices; i++) { normals.push_back(glm::vec3()); } 
for(int i = 0; i < numVertices; i++) { sTangents.push_back(glm::vec3()); } 
for (int i = 0; i < numVertices; i++) { tTangents.push_back(glm::vec3()); } 
for (int i = 0; i < numIndices; i++) { indices.push_back(0); } 

// 计算 第 一 个 环 


for (int i = 0; i.“ preg + dy, i++). f 
float amt = toRadians(i*360.0f / prec); 
// 绕 原点 旋转 点 ， 形 成 环 ， 然 后 将 它们 向 外 移动 
glm::mat4 rMat = glm::rotate(glm::mat4(1.0f), amt, glm::vec3(0.0f, 0.0f, 1.0f)); 
glm::vec3 initPos(rMat * glm::vec4 (outer, 0.0f, 0.0f, 1.0f)); 
vertices[i] = glm::vec3(initPos + glm::vec3(inner, 0.0f, 0.0f)); 


// 为 环 上 的 每 个 顶点 计算 纹理 坐标 
texCoords[i] = glm::vec2(0.0f, ((float)i / (float)prec)); 


// 计算 切 向 量 和 法 向 量 ， 第 一 个 切 向 量 是 绕 2 轴 旋 转 的 Y 轴 

rMat = glm::rotate(glm::mat4(1.0f), amt, glm::vec3(0.0f, 0.0f, 1.0f)); 

tTangents[i] = glm::vec3(rMat * glm::vec4(0.0f, -1.0f, 0.0f, 1.0£)); 

sTangents(i] = glm::vec3(glm::vec3(0.0f, 0.0f, -1.0f)); // 第 二 个 切 向 量 是 -z Hh 

normals[i] = glm::cross(tTangents[i], sTangents[i]); // 它们 的 又 乘积 就 是 法 向 量 
} 


// 绕 Y 轴 旋转 最 初 的 那个 环 ， 形 成 其 他 的 环 
for (int ring = 1; ring < prec + 1; ringt+) { 
for (int vert = 0; vert < prec + 1; Vert++) { 


// 绕 Y 轴 旋转 最 初 那 个 环 的 顶点 坐标 

float amt = (float)( toRadians(ring * 360.0f / prec)); 

glm::mat4 rMat = glm::rotate(glm::mat4(1.0f), amt, glm::vec3(0.0f, 1.0f, 0.0f)); 
vertices [ring* (prec + 1) + i] = glm::vec3(rMat * glm::vec4(vertices[i], 1.0f)); 


// 计算 新 环 项 点 的 纹理 坐标 


texCoords [ring* (prec + 1) + vert] = glm::vec2((float)ring*2.0f / (float)prec, texCoords 
[vert] .t); 
if (texCoords[ring* (prec + 1) + i].s > 1.0) texCoords[ring*(prect+l)+i].s -= 1.0f; 


// 绕 Y 轴 旋转 切 向 量 和 副 切 向 量 

rMat = glm::rotate(glm::mat4(1.0f), amt, glm::vec3(0.0f, 1.0f, 0.0f)); 

sTangents[ring* (prec + 1) + i] = glm::vec3(rMat * glm::vec4(sTangents[i], 1.0f)); 
rMat = glm::rotate(glm::mat4(1.0f), amt, glm::vec3(0.0f, 1.0f, 0.0f)); 
tTangents[ring* (prec + 1) + i] = glm::vec3(rMat * glm::vec4(tTangents[i], 1.0f)); 


e 
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// 绕 Y 轴 旋转 法 向 量 

rMat = glm::rotate(glm::mat4(1.0f), amt, glm::vec3(0.0f, 1.0f, 0.0f)); 

normals[ring* (prec + 1) + i] = glm::vec3(rMat * glm::vec4(normals[i], 1.0f)); 
Pl 


// 按照 逐个 顶点 的 两 个 三 角形 ， 计 算 三 角形 索引 
for (int ring = 0; ring < prec; ring++) { 
for (int vert = 0; vert < prec; Vert++) { 


indices[((ring*prec + vert) * 2) * 3 + 0) = ring*(prec + 1) + vert; 
indices[((ring*prec + vert) * 2) * 3 + 1] = (ring + 1)*(prec + 1) + vert; 
indices[((ring*prec + vert) * 2) * 3 + 2] = ring*(prec + 1) + vert + 1; 
indices[((ring*prec + vert) * 2 + 1) * 3 + 0) = ring*(prec + 1) + vert + 1; 
indices[((ring*prec + vert) * 2 + 1) * 3 + 1] = (ring + 1)*(prec + 1) + vert; 
indices[((ring*prec + vert) * 2 + 1) * 3 + 2] = (ring + 1)*(prec + 1) + vert + 1; 


RED 


// 环 面 索引 和 顶点 的 访问 函数 

int Torus::getNumVertices() { return numVertices; } 

int Torus::getNumIndices() { return numIndices; } 

std::vector<int> Torus::getIndices() { return indices; } 

std: :vector<glm::vec3> Torus::getVertices() { return vertices; } 
std::vector<glm::vec2> Torus::getTexCoords() { return texCoords; } 
std: :Vector<glm; :vec3> Torus::getNormals() { return normals; } 
std::vector<glm::vec3> Torus::getStangents() { return sTangents; } 
std::vector<glm::vec3> Torus::getTtangents() { return tTangents; } 


环 面 头 文件 (Torus .h) 


#include <cmath> 

#include <vector> 

#include <glm\glm.hpp> 

class Torus 

{ 

private: 
int numVertices; 
int numIndices; 
int prec; 
float inner; 
float outer; 
std::vector<int> indices; 
std: :vector<glm::vec3> vertices; 
std: :vector<glm::vec2> texCoords; 
std::vector<glm::vec3> normals; 
std: :vector<glm::vec3> sTangents; 
std::vector<glm::vec3> tTangents; 
void init(); 
float toRadians(float degrees) ; 


public: 
Torus(); 
Torus(float innerRadius, float outerRadius, int prec); 
int getNumVertices(); 
int getNumIndices(); 
std::vector<int> getIndices(); 
std::vector<glm::vec3> getVertices(); 
std: :vector<glm::vec2> getTexCoords () ; 
std: :vector<glm::vec3> getNormals(); 
std::vector<glm::vec3> getStangents(); 
std::vector<glm::vec3> getTtangents(); 
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] 


使 用 Torus 类 (用 OpenGL 索引 ) 


#include "Torus.h" 
Torus myTorus(0.5f, 0.2f, 48); 


void setupVertices(void) { 
std::vector<int> ind = myTorus.getIndices(); 
std::vector<glm::vec3> vert = myTorus.getVertices(); 
std::vector<glm::vec2> tex = myTorus.getTexCoords(); 
std::vector<glm::vec3> norm = myTorus.getNormals() ; 


std: :Vector<float> pvalues; 
std::vector<float> tvalues; 
std::vector<float> nvalues; 


int numVertices = myTorus.getNumVertices(); 

for (int i = 0; i < numVertices; i++) { 
pvalues.push back(vert[i] .x); 
pvalues.push back(vert[i].y); 
pvalues.push_back(vert[i].z); 


tvalues.push_back(tex[i].s); 
tvalues.push_back(tex[i].t); 


nvalues.push back(norm[i] .x); 
nvalues.push:back(norm[i].y); 
nvalues.push_back(norm[i] .z); 
} 
glGenVertexArrays (1, vao); 
glBindVertexArray (vao[0]); 
glGenBuffers(4, vbo); // 像 以 前 一 样 生 成 VBO， 并 新 增 一 个 用 于 索引 


glBindBuffer(GL_ARRAY BUFFER, vbo[0]); // 顶点 位 置 
glBufferData(GL_ARRAY BUFFER, pvalues.size() * 4, &pvalues[0], GL_STATIC_DRAW) ; 


glBindBuffer (GL ARRAY BUFFER, vbo[1]); // 纹理 坐标 
glBufferData (GL ARRAY BUFFER, tvalues.size() * 4, &tvalues[0], GL STATIC DRAW); 


glBindBuffer (GL ARRAY BUFFER, vbo[2]); // 法 向 量 
glBufferData (GL ARRAY BUFFER, nvalues.size() * 4, &nvalues[0], GL STATIC DRAW); 


glBindBuffer (GL ELEMENT ARRAY BUFFER, vbo[3]); // 索引 
glBufferData (GL ELEMENT ARRAY BUFFER, ind.size() * 4, &ind[0], GL STATIC DRAW); 


在 display() 中 


glBindBuffer (GL _ ELEMENT ARRAY BUFFER, vbo[3]); 
glDrawElements (GL _ TRIANGLES, myTorus.getNumIndices(), GL_UNSIGNED_INT, 0); 


请 注意 ， 在 使 用 Torus 类 的 代码 中 ，setupVertices0) 中 的 循环 现在 只 存储 一 次 与 每 个 顶点 
关联 的 数据 ， 而 不 是 每 个 索引 条 目 存储 一 次 〈 如 球体 示例 中 的 情况 )。 这 种 差异 也 反映 在 要 
输入 VBO 的 数据 的 数组 声明 大 小 中 。 男 请 注意 ， 在 环 面 示例 中 ， 不 是 在 检索 顶点 数据 时 使 
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用 索引 值 ,而 是 直接 将 它们 简单 地 加 载 到 VBO #3 中 。 由 于 此 VBO 被 指定 为 GL ELEMENT 
ARRAY BUFFER, OpenGL 知道 该 VBO 包含 顶点 索引 。 
图 6.9 显示 了 实例 化 环 面 并 使 用 砖 纹理 对 其 进行 纹理 化 的 结果 。 





图 6.9 程序 生成 的 环 面 


6.3 加载 外 部 构建 的 模型 


杂 的 3D 模型 ,例如 在 视频 游戏 或 计算 机 生成 的 电影 中 的 人 物 角 色 ， 通常 使 用 建 模 工具 
生成 。 这 种 “DCC”( 数 字 内 容 创 建 ) 工具 使 人 们 (例如 艺术 家 ) 能 够 在 3D 空间 中 构建 任意 
形状 并 自动 生成 顶点、 纹理 坐标 、 顶 点 法 向 量 等 。 有 太 多 这 样 的 工具 ， 此 处 无 法 一 一 列 出 ， 
有 几 个 例子 是 MAYA、Blender、Lightwave、Cinema4D 等 。Blender 是 免费 和 开源 的 。 图 6.10 
显示 了 编辑 3D 模型 时 的 Blender 屏幕 示例 。 


EH 





图 6.10 Blender 模型 创建 示例 BF! 


为 了 让 我 们 在 OpenGL 场景 中 使 用 DCC 工具 创建 的 模型 ， 需要 以 我 们 可 以 读 取 (导入 ) 
到 我 们 程序 中 的 格式 保存 〈 导 出 ) 该 模型 。 有 好 几 种 标准 的 3D 模型 文件 格式 ; 再 次 说 明 ， 
有 太 多 无 法 一 一 列 出 ， 有 一 些 例子 是 Wavefront (obj), 3D Studio Max (.3ds)、 斯 坦 福 扫描 
存储 库 〈.ply)、Ogre3D (.mesh)， 供 参考 。 其 中 最 简单 的 是 Wavefront (通常 被 称 为 OBJ)， 
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所 以 我 们 将 仔细 讲解 它 。 

OBJ 文件 很 简单 ， 我 们 可 以 相对 容易 地 开发 一 个 基本 的 导入 器 。 在 OBJ 文件 中 ， 通 过 
文本 行 的 形式 指定 顶点 几何 数据 、 纹 理 坐 标 、 法 向 量 和 其 他 信息 。 它 有 一 些 限制 一 一 例如 ， 
OBJ 文件 无 法 指定 模型 动画 。 

OBJ 文件 中 的 行 ， 以 字符 标记 开头 ， 表 示 该 行 上 的 数据 类 型 。 一 些 常 见 的 标签 包括 : 

@ Yv- 几 何 《〈 顶 点 位 置 ) 数据 ; 

© vt- 纹理 坐标 ; 

@  vn- 顶 点 法 向 量 ; 

@ ff 面 〈 通 和 党 是 三 角形 中 的 顶点 )。 

还 有 其 他 标签 可 以 用 来 存储 对 象 名 称 、 使 用 的 材质 、 曲 线 、 阴 影 和 许多 其 他 细节 。 我 们 
这 里 只 讨论 上 面 列 出 的 4 个 标签 ， 这 些 标签 足以 导入 各 种 复杂 模型 。 

假设 我 们 使 用 Blender 构建 一 个 简单 的 金字 塔 , 例如 我 们 为 程序 4.3 开发 的 金字 塔 ,图 6.11 
是 在 Blender 中 创建 的 类 似 的 金字 塔 的 屏幕 截图 。 





图 6.11 Æ Blender 中 构建 的 金字 塔 


在 Blender 中 ， 如 果 我 们 现在 导出 我 们 的 金字 塔 模型 ， 指 定 .obj 格式 ， 并 设置 Blender 
输出 纹理 坐标 和 顶点 法 向 量 ， 则 会 创建 一 个 包含 所 有 这 些 信息 的 OBI 文件 。 生 成 的 OBJ 文 
件 如 图 6.12 所 示 。 (纹理 坐标 的 实际 值 可 能 因 横 型 的 构建 方式 而 异 。) 

我 们 对 OBI 文件 的 重要 部 分 进行 了 颜色 标记 以 供 参 考 。 顶 部 以 “#" 开 头 的 行 是 由 Blender 
放置 的 注释 ， 我 们 的 导入 器 忽略 了 这 些 注释 。 接 下 来 是 以 “o” 开 头 的 行 ， 给 出 对 象 的 名 称 。 
我 们 的 导入 器 也 可 以 忽略 这 一 行 。 之 后 ， 有 一 行 以 “s” 开 头 ， 指 定 表 面 不 应 该 被 平滑 。 我 
们 的 代码 也 会 忽略 以 “s” 开 头 的 行 。 

OBI 文件 中 的 第 一 部 分 有 实际 内 容 的 行 是 以 “v” 开 头 的 那些 (第 4 行 ~~ 第 8 行 )。 它 们 
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指定 金字 塔 模型 的 5 个 项 点 相对 于 原点 的 区 YA Z 局 部 空间 坐标 。 在 这 里 ， 原 点 位 于 金字 
塔 的 中 心 。 


Blender v2.70 (sub 0) OBJ File: '' 
www.blender.org 
Pyramid 
1.000000 -1.000000 -1.000000 
1.000000 -1.000000 1.000000 
-1.000000 -1.000000 1.000000 
-1.000000 -1.000000 -1.000000 
0.000000 1.000000 0.000000 
.515829 0.258220 
.515829 0.750612 
.023438 0.750612 
.370823 0.790246 
.820312 0.388210 
.820312 0.991264 
.566135 0.988689 
.015625 0.742493 
0 
0 
0 
0 
0 
0 
0 


44999 4 0 %% 


-566135 0.496298 

.015625 0.250102 

-566135 0.003906 

.000000 0.000000 

-000000 0.603054 

-550510 0.402036 

.023438 0.258220 

.000000 -1.000000 0.000000 

.894427 0.447214 0.000000 
-0.000000 0.447214 0.894427 
-0.894427 0.447214 -0.000000 
0.000000 0.447214 -0.894427 

off 

2717/1 372/1 4/3/1 

1/4/2 5/5/2 2/6/2 

2/7/3 5/8/3 3/9/3 

3/9/4 5/10/4 4/11/4 

5/12/5 1/13/5 4/14/5 

1/15/1 2/1/1 4/3/1 


vt 
vt 
vt 
vt 
| vt 
vt 
vt 
vt 
vt 
vt 
vt 
vt 


< 
ct 
Dooorhrhooooooooceoooeco 


Wm 





图 6.12 金字 塔 导 出 的 OBJ 文件 


AERE A “vw” FA) 是 各 种 纹理 坐标 。 纹 理 坐 标 列表 比 顶 点 列表 长 的 原因 是 一 些 
顶点 参与 多 个 三 角形 ， 并 且 在 这 些 情 况 下 可 能 使 用 不 同 的 纹理 坐标 。 

ERE AA CLA “vn” FA) 是 各 种 法 向 量 。 该 列表 通常 也 比 顶 点 列表 长 〈 尽 管 在 该 示例 
中 不 是 这 样 )， 同 样 是 因为 一 些 顶 点 参与 多 个 三 角形 ， 并 且 在 那些 情况 下 可 能 使 用 不 同 的 法 
向量 。 

在 文件 底部 附近 标记 为 紫色 的 值 ( 以 “f” 开头 ) 指定 三 角形 〈 即 “ 面 27。 在 此 示例 中 ， 
每 个 面 〈 三 角形 ) 具有 3 个 元 素 ， 每 个 元 素 具 有 由 “/” 分 隔 的 3 “MA (OBJ 也 允许 其 他 格 
式 )。 每 个 元 素 的 值 分 别 是 顶点 列表 、 纹 理 坐 标 和 法 向 量 的 索引 。 例 如 ， 第 三 个 面 是 : 

E2 33 37973 


这 表明 顶点 列表 中 的 第 2 个、 第 5 个 和 第 3 个 顶点 〈 蓝 色 ) 组 成 了 一 个 三 角形 (请 注意 
OBJ 索引 从 1 开始 )。 相 应 的 纹理 坐标 是 红色 部 分 中 纹理 坐标 列表 中 的 第 7 项 、 第 8 项 和 第 9 
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项 。 所 有 3 个 顶点 都 具有 相同 的 法 向 量 ， 也 就 是 以 绿色 显示 的 法 向 量 列表 中 的 第 3 项 。 

OBJ 格式 的 模型 并 不 要 求 具有 法 向 量 , 甚至 纹理 坐标 。 如 果 模 型 没有 纹理 坐标 或 法 向 量 ， 
则 面 的 数值 将 仅 指 定 顶点 索引 ， 

F233 
如 果 模 型 具有 纹理 坐标 ， 但 不 具有 法 向 量 ， 则 格式 如 下 : 
£2/7 -S48 3/9 
并 且 ， 如 果 模 型 具有 法 向 量 但 没有 纹理 坐标 ， 则 格式 为 : 
E213 SLZ 


模型 具有 数 万 个 顶点 并 不 罕见 。 对 于 所 有 可 以 想象 的 应 用 场景 ， 几 乎 都 可 以 在 互联 网 上 
下 载 到 数 百 种 这 样 的 模型 ， 包 括 动物 、 建 筑 物 、 汽 车 、 飞 机 、 神 话 生物 、 人 等 。 
在 互联 网 上 可 以 获得 可 以 导入 OBI 模型 的 复杂 程序 各 不 相同 的 导入 程序 。 编 写 一 个 非 
常 简单 的 OBJ 加 载 器 函数 也 并 不 困难 ， 它 可 以 处 理 我 们 看 到 的 基本 标记 Cv. vt. vn 和 f). 
程序 6.3 显示 了 一 个 这 样 的 加 载 器 ， 尽 管 功能 非常 有 限 。 它 包含 一 个 类 来 保存 任意 的 导入 模 
型 ， 该 模型 又 调用 导入 器 。 
在 我 们 讲述 简单 OBJ 导入 器 的 代码 之 前 ， 我 们 必须 警告 读者 其 局 限 性 。 
© 它 仅 支持 包含 所 有 3 个 面 属性 字段 的 模型 。 也 就 是 说 ， 顶 点 位 置 、 纹 理 坐 标 和 法 向 
EAD GDA f HHH HHIH HHS PTE RAE EE o 

@ 材质 标签 将 被 忽略 一 一 必须 使 用 第 5 章 中 描述 的 方法 完成 纹理 化 。 

e 仅 支 持 由 单个 三 角形 网 格 组 成 的 OBJ 模型 (OBJ 格式 支持 复合 模型 ， 但 我 们 的 简 
单 导入 器 不 支持 )。 

o 它 假设 每 行 上 的 元 素 只 用 一 个 空格 分 隔 。 

如 果 您 的 OBJ 模型 不 满足 上 述 所 有 条 件 , 并 且 您 希望 使 用 程序 6.3 中 的 简单 加 载 程序 导 
入 它 ， 则 可 能 仍然 可 行 。 通常 可 以 将 这 样 的 模型 加 载 到 Blender 中 ， 然 后 将 其 导出 到 另 一 个 
满足 加 载 器 限制 条 件 的 OBI 文件 中 。 例如， 如 果 模 型 不 包含 法 向 量 ， 则 可 以 让 Blender 在 导 
出 修改 后 的 OBJ 文件 时 生成 法 向 量 。 

我 们 的 OBI 加 载 器 的 男 一 个 限制 与 索引 有 关 。 在 前 面 的 描述 中 提 到 了 “f” 标 签 允许 混 
合 和 匹配 顶点 位 置 、 纹 理 坐 标 和 法 向 量 的 可 能 性 。 例 如 ， 两 个 不 同 的 “ 面 ” 行 可 以 包括 指向 
相同 v 条 目 但 是 不 同 vt 条 目的 索引 。 遗 憾 的 是 ，OpenGL 的 索引 机 制 不 支持 这 种 灵活 性 一 一 
OpenGL 中 的 索引 条 目 只 能 指向 特定 的 顶点 及 其 属性 。 这 使 得 在 某 种 程度 上 编写 OBJ 模型 
加 载 器 变 得 复杂 ， 因 为 我 们 不 能 简单 地 将 三 角形 面条 目 中 的 引用 复制 到 索引 数组 中 。 相 反 ， 
使 用 OpenGL 索引 需要 确保 面条 目的 v、vt 和 vn 值 的 整个 组 合 在 索引 数组 中 都 有 自己 的 引 
用 。 一 种 更 简单 但 效率 更 低 的 替代 方案 是 为 每 个 三 角形 面条 目 创建 一 个 新 顶点 。 尽 管 使 用 
OpenGL 索引 具有 节省 空间 的 优势 〈 特 别 是 在 加 载 较 大 模型 时 )， 但 为 了 清晰 ， 我 们 选择 这 
种 更 简单 的 方法 。 

ModelImporter 类 包含 一 个 parseOBJO 函 数 ， 它 逐 行 读 取 OBI 文件 ， 分 别处 理 v, vt. vn 
和 f 这 4 种 情况 。 在 每 种 情况 下 ， 提 取 行 上 的 后 续 数字 ， 首 先 使 用 erase(0) 跳 过 初始 的 v vts 
vn 或 f 字 符 ， 然 后 使 用 C++ stringstream 类 的 “>>” 运 算 符 提 取 每 个 后 续 参 数值 ， 然 后 将 它 
们 存储 在 C++ 浮 点 向 量 中 。 当 处 理 面 (f) 条 目 时 ， 使 用 C++ 浮 点 向 量 中 的 对 应 条 目 构 建 顶 
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点 ， 包 括 顶 点 位 置 、 纹 理 坐 标 和 法 向 量 。 
ModelImporter 类 和 ImportedModel 类 包含 在 同一 个 文件 中 ，ImportedModel 类 通过 将 导 


入 的 顶点 放 入 vec2 和 vec3 对 象 的 向 量 中 ， 简 化 了 加 载 和 访问 OBI 文件 顶点 的 过 程 。 回 想 
-下 这 些 GLM 类 ; 我 们 在 这 里 使 用 它们 来 存储 顶点 位 置 、 纹 理 坐 标 和 法 向 量 。 然 后 ， 


ImportedModel 类 中 的 读 取 函数 使 它们 可 用 于 C++/OpenGL 应 用 程序 ， 其 方式 与 Sphere 和 
Torus 类 中 的 方式 相同 。 

在 ModelImporter 和 ImportedModel 类 之 后 是 一 系列 调用 示例 ， 加 载 OBJ 文件 ， 然 后 将 
顶点 信息 传输 到 一 组 VBO 中 以 供 后 续 滨 染 。 

图 6.13 显示 了 从 NASA 网 站 MI 下 载 的 OBI 格式 的 航天 飞机 演 染 模型 ， 使 用 程序 6.3 
中 的 代码 导入 ,并 使 用 程序 5.1 中 的 代码 和 相应 的 带 有 各 向 异性 过 滤 的 NASA 纹理 图 像 文件 
进行 纹理 化 。 该 纹理 图 像 是 使 用 UV 映射 的 示例 ,其 中 模型 中 的 纹理 坐标 被 仔细 地 映射 到 纹 
理 图 像 的 特定 区 域 。( 如 第 5 章 所 述 ，UV 映射 的 细节 超出 了 本 书 的 范围 。) 





图 6.13 ” 带 有 纹理 的 NASA 航天 飞机 模型 


程序 6.3 简化 的 ( 有 限制 的 ) OBJ 加 载 器 


类 (ImportedModel . cpp) 








ImportedModel 和 ModelImporter 


#include <fstream> 
#include <sstream> 
#include <glm\glm.hpp> 
#include "ImportedModel.h" 
using namespace std; 


// ------------ ImportedModel 类 


ImportedModel: :ImportedModel (const char *filePath) { 
ModelImporter modelImporter = ModelImporter(); 
modelImporter.parseOBJ(filePath) ; // 使 用 modelImporter 获取 顶点 信息 
numVertices = modelImporter.getNumVertices() ; 
std: :Vector<float> verts = modelImporter.getVertices(); 
std::vector<float> tcs = modelImporter.getTextureCoordinates (); 
std: :vector<float> normals = modelImporter.getNormals(); 


for (int i = 0; i < numVertices; i++) { 
vertices.push_ back(glm::vec3(verts[i*3], verts[i*3+1], verts[i*3+2])); 
texCoords.push_back(glm::vec2(tcs[i*2], tcs[i*2+1])); 


normalVecs.push_back(glm::vec3(normals[i*3], normals[i*3+1], normals[i*3+2])); 
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int ImportedModel::getNumVertices() { return numVertices; } // accessors 
std::vector<glm: :vec3> ImportedModel::getVertices() { return vertices; } 
std::vector<glm::vec2> ImportedModel::getTextureCoords() { return texCoords; } 
std::vector<glm::vec3> ImportedModel::getNormals() { return normalVecs; } 


// _=------------- ModelImporter 类 
ModelImporter::ModelImporter() {} 


void ModelImporter::parseOBJ(const char *filePath) { 
float xX, Yy; 27 
string content; 
ifstream fileStream(filePath, ios::in); 
string line = ""; 
while (!fileStream.eof()) { 
getline(fileStream, line); 
if (line.compare(0, 2, "v ") == 0) { // 顶点 位 置 ("v" 的 情况 ) 
stringstream ss(line.erase(0, 1)); 
88.>> x; SS >> yj; SS >> z; // 提取 顶点 位 置 数值 
vertVals.push_back (x); 
vertVals.push_back (y); 
vertVals.push_back (z); 


if (line.compare(0, 2, "vt") == 0) { // 纹理 坐标 〈"vt" 的 情况 ) 
stringstream ss(line.erase(0, 2)); 
$8,.>> x7 $9 >> y; // 提取 纹理 坐标 数值 


stVals.push_back(x) ; 
stVals.push_back(y); 


if (line.compare(0, 2, "vn") == 0) { // 顶点 法 向 量 ("vn" 的 情况 ) 
stringstream ss(line.erase(0, 2)); 
SH >> Xy sS >> YB >>aP // 提取 法 向 量 数值 


normVals.push back (x); 
normVals.push_back (y); 
normVals.push_back (z); 


if (line.compare(0, 2, "f") == 0) { // 三 角形 面 ("f" 的 情况 ) 
string oneCorner, v, t, n; 
stringstream ss(line.erase(0, 2)); 
for (int. 1 = iira 3x i++] f 
getline(ss, oneCorner, ' '); // 提取 三 角形 面 引 用 
stringstream oneCornerSS(oneCorner) ; 
getline(oneCornerSs, v, '/'); 
getline(oneCornerSs, t, '/'); 
getline(oneCornerSs, n, '/'); 


int vertRef = (stoi(v) - 1) * 3; // "stoi" 将 字符 串 转化 为 整 型 
int tcRef = (stoi(t) - 1) * 2; 

int normRef = (stoi(n) - 1) * 3; 
triangleVerts.push_back(vertVals[vertRef]); // 构建 顶点 向 量 


triangleVerts.push_back(vertVals[vertRef + 1]); 
triangleVerts.push_back(vertVals[vertRef + 2]); 


textureCoords.push_back(stVals[tcRef]); // 构建 纹理 坐标 向 量 
textureCoords.push back(stVals[tcRef + 1]); 





: 
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normals.push back(normVals[normRef]); 
normals.push back(normVals[normRef + 1]); 
normals.push back(normVals[normRef + 2]); 


有 
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// 法 向 量 的 向 量 


int ModelImporter::getNumVertices() { return (triangleVerts.size()/3); } // 读 取 函数 
std: :vector<float> ModelImporter: :getVertices() { return triangleVerts; } 
std::vector<float> ModelImporter: :getTextureCoordinates() { return textureCoords; } 


std::vector<float> ModelImporter::getNormals() { return normals; 


ImportedModel 和 ModelImporter 头 文件 (ImportedModel.h) 
#include <vector> 


class ImportedModel 
{ 
private: 
int numVertices; 
std: :vector<glm::vec3> vertices; 
std: :vector<glm::vec2> texCoords; 
std::vector<glm::vec3> normalVecs; 
public: 
ImportedModel (const char *filePath); 
int getNumVertices(); 
std::vector<glm::vec3> getVertices(); 
std::vector<glm::vec2> getTextureCoords () ; 
std::vector<glm::vec3> getNormals(); 
}; 


class ModelImporter 

{ 

private: 
// 从 0BJ 文 件 读 取 的 数值 
std: :Vector<float> vertVals; 
std::vector<float> stVals; 
std: :vector<float> normVals; 


// 保存 为 顶点 属性 以 供 后 续 使 用 的 数值 
std::vector<float> triangleVerts; 
std::vector<float> textureCoords; 
std: :vector<float> normals; 


public: 
ModellImporter (); 
void parseOBJ(const char *filePath); 
int getNumVertices(); 
std: :vector<float> getVertices(); 
std::vector<float> getTextureCoordinates() ; 
std::vector<float> getNormals(); 

}; 


使 用 模型 导入 器 
ImportedModel myModel ("shuttle.obj") ; // 在 顶层 声明 中 


void setupVertices(void) { 
std::vector<glm::vec3> vert = myModel.getVertices(); 
std: :vector<glm::vec2> tex = myModel.getTextureCoords () ; 


} 
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std: :Vector<glm: :vec3> norm = myModel.getNormals(); 
int numobjVertices = myModel.getNumVertices(); 


std::vector<float> pvalues; // 顶点 位 置 
std: :vector<float> tvalues; // 纹理 坐标 
std::vector<float> nvalues; // 法 向 量 

for (int i = 0; i < numObjVertices(); i++) { 


pvalues.push_back((vert[i]).x); 
pvalues.push_back((vert[i]).y); 
pvalues.push_back((vert[i]).z); 
tvalues.push_back((tex[i]).s); 

tvalues.push_back((tex[i]).t); 

nvalues.push_back((norm[i]).x); 
nvalues.push_back((norm[i]).y); 
nvalues.push_back((norm[i]).z); 


} 


glGenVertexArrays(1, vao); 
glBindVertexArray(vao[0]); 
glGenBuffers (numVBOs, vbo); 


// 顶点 位 置 的 VBO 
glBindBuffer(GL_ARRAY BUFFER, vbo[0]); 
glBufferData(GL ARRAY BUFFER, pvalues.size() * 4, &pvalues[0], GL STATIC DRAW); 


// 纹理 坐标 的 VBO 
glBindBuffer (GL ARRAY BUFFER, vbo[1]); 
glBufferData (GL ARRAY BUFFER, tvalues.size() * 4, &tvalues[0], GL STATIC DRAW); 


// 法 向 量 的 VBO 

glBindBuffer(GL_ARRAY BUFFER, vbo[2]); 

glBufferData(GL_ARRAY_ BUFFER, nvalues.size() * 4, é&nvalues[0], GL STATIC DRAW); 
} 


在 display() 中 


glDrawArrays (GL TRIANGLES, 0, myModel.getNumVertices()); 
、 
补充 说 明 


虽然 我 们 讨论 了 使 用 DCC 工具 创建 3D 模型 ， 但 我 们 没有 讨论 如 何 使 用 这 些 工 具 。 相 
关 教 程 超出 了 本 书 的 范围 ， 但 是 所 有 流行 的 工具 都 有 大 量 的 教程 视频 材料 文档 可 供 使 用 ， 
例如 Blender 和 MAYA。 

3D 建 模 的 主题 本 身 就 是 一 个 丰富 的 研究 领域 。 我 们 在 本 章 中 所 说 只 是 一 个 基本 的 介绍 ， 
重点 是 它 与 OpenGL 的 关系 。 许 多 大 学 提供 3D 建 模 的 全 部 课程 ， 并 且 我 们 也 鼓励 有 兴趣 学 
习 更 多 的 读者 参考 一 些 提供 更 多 细节 的 流行 资源 〈 例 如 :BA )。 

我 们 重申 ， 本 章 中 介绍 的 OBJ 导入 器 是 很 有 限 的 ， 并 且 只 能 处 理 OBJ 格式 支持 的 一 部 
分 功能 。 虽 然 足 以 满足 我 们 的 需求 ， 但 它 会 在 某 些 OBI 文件 上 失败 。 在 这 些 情况 下 ， 有 必 
要 首先 将 模型 加 载 到 Blender (或 MAYA 等 ) 工具 中 ,然后 将 其 重新 导出 为 符合 导入 器 限制 
的 OBJ 文件， 如 本 章 前 面 所 述 。 
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6.1 修改 程序 4.4， 使 “太阳 ”“ 行 星 ” 和 “月 亮 ” 成 为 纹理 球体 ， 如 图 4.11 所 示 。 

6.2 (RA) 修改 您 的 习题 6.1 的 程序 ， 以 使 得 图 6.16 中 导入 的 NASA 航天 飞机 对 象 
也 绕 “ 太 阳 ” 运 行 。 您 需要 试验 应 用 于 航天 飞机 的 尺度 和 旋转 方式 ， 使 其 看 起 来 更 台 真 。 

63 (研究 和 项 目 ) 了 解 如 何 使 用 Blender 创建 自己 的 3D 对 象 的 基础 知识 。 想 要 在 您 
的 OpenGL 应 用 程序 中 充分 利用 Blender， 您 将 需要 学 习 如 何 使 用 Blender 的 UV 展开 工具 
来 生成 纹理 坐标 和 相关 的 纹理 图 像 。 然 后 ， 您 可 以 将 对 象 导 出 为 OBJ 文件 ， 并 使 用 程序 6.3 
中 的 代码 加 载 它 。 
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第 7 章 光照 


光照 以 不 同 的 方式 影响 着 我 们 世界 的 外 观 ， 有 时 甚至 是 很 戏剧 化 的 方式 。 当 手电 简 照 射 
在 物体 上 时 ， 我 们 会 期 望 它 面向 光线 的 一 侧 看 起 来 更 亮 。 我 们 所 居住 的 地 球 ， 在 中 午 朝 癌 
太阳 时 候 被 照 得 很 亮 ， 但 随 着 它 的 自转 ， 同 一 个 地 点 的 亮度 会 逐渐 由 白天 转变 为 傍晚 ， 直 
到 午夜 变 得 完全 黑暗 。 物 体 对 光 的 反射 也 各 不 相同 。 物 体 除了 颜色 的 差别 ， 也 可 以 具有 不 
同 的 反射 特性 。 考 虑 两 个 物体 ， 在 都 是 绿色 的 情况 下 ， 其 中 一 个 是 布 制 的 ， 而 另 一 个 是 抛 
光 钢 材质 的 一 一 那么 后 者 看 起 来 会 更 “内 亮 ” 
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我 们 所 观察 到 的 光 是 高 能 量 源 发 出 的 光子 , 经 过 反射 直到 一 些 光 子 到 达 我 们 的 眼睛 的 产 
物 。 不 幸 的 是 ， 在 计算 上 模拟 这 个 自然 过 程 是 不 可 行 的 ， 因 为 这 需要 模拟 并 跟踪 大 量 光 子 
的 运动 ， 即 向 我 们 的 场景 添加 海量 的 对 象 〈 和 和 矩阵)。 因 此 ， 我 们 需要 的 是 光照 模型 。 

光照 模型 (Lighting model) 有 时 也 被 称 为 着 色 模 型 〈Shading model)， 在 着 色 器 编程 存 
在 的 情况 下 ， 这 可 能 有 点 令 人 困惑 。 有 时 又 使 用 术语 反射 模型 (Reflection model)， 进 一 步 
使 术语 复杂 化 。 我 们 将 尽力 坚持 使 用 简单 而 实用 的 术语 。 

现在 最 常见 的 光照 模型 称 为 “ADS” 模 型 ， 因 为 它们 基于 标记 为 A、D AS 的 3 种 类 型 
的 反射 。 

@ 环境 光 反 射 (Ambient reflection) 模拟 低级 光照 ， 影 响 场景 中 的 所 有 物体 。 

© ZRH) (Diffuse reflection) 根据 光线 的 入 射 角 度 调整 物体 亮度 。 

@ 镜面 反射 (Specular reflection) 用 以 展示 物体 的 光泽 ， 通 过 在 物体 表面 上 ， 光 线 最 

直接 地 反射 到 我 们 的 眼睛 的 位 置 ， 策 略 性 地 放置 适当 大 小 的 高 光 来 实现 。 

ADS 模型 可 用 于 模拟 不 同 的 光照 效果 和 各 种 材质 。 

图 7.1〈 见 彩 插 ) 展示 了 位 置 光 对 于 闪 
亮 黄金 环 面 的 环境 光 反 射 、 漫 反射 和 镜面 反 
射 分量 。 

回想 一 下 ， 场 景 的 绘制 最 终 是 由 片段 着 色 
器 为 屏幕 上 的 每 个 像素 输出 颜色 而 实现 的 ,使 
用 ADS 光照 模型 需要 指定 由 于 像素 的 RGBA 
输出 值 上 的 光照 而 产生 的 分 量 。 因 素 包 括 : 

@ ”光源 类 型 及 其 环境 、 漫 反射 和 镜面 反 

射 特性 ; 图 7.1 ADS 光照 分 量 

@ 对 象 材质 的 环境 、 漫 反射 和 镜面 反射 特征 ; 











| 
: 
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o ”对象 的 材质 指定 为 “光泽 ”， 
@ 光线 照射 物体 的 角度 ; 
@ ”从 中 查看 场景 的 角度 。 


7.2 Eom 


光源 有 许多 类 型 ， 每 种 光源 具有 不 同 的 特性 ， 需 要 不 同 的 步骤 来 模拟 其 效果 。 常 见 光 源 
类 型 有 : 

@ 全 局 光 《〈 通 常 称 为 “全 局 环境 光 ” 因为 它 仅 包 含 环 境 光 组 件 ); 

@ 定向 光 (或 “ 远 距 离 光 ”); 

@ MEJ (或 “点 光源 ”); 

@ 聚光灯 。 

全 局 环境 光 是 最 简单 的 光源 模型 。 它 没有 光源 位 置 一 一 无 论 场景 中 的 对 象 在 何 处 ， 其 上 
的 每 个 像素 都 有 着 相同 的 光照 。 全 球 环境 光照 模拟 了 现实 世界 中 的 一 种 光线 现象 ， 即 光线 
经 过 很 多 次 反射 ， 其 光源 和 方向 都 已 经 无 法 确定 。 全 局 环境 光 仅 具有 环境 光 反 射 分 量 ， 用 
RGBA (ABE: 它 没有 漫 反 射 或 镜面 反射 分 量 。 例 如 ， 全 局 环境 光 可 以 定义 如 下 : 


float globalAmbient[4] = { 0.6f, 0.6f, 0.6f, 1.0f }; 


RGBA 的 取 值 范围 为 0 一 1， 全 局 环境 光 通 常 被 建 模 为 偏 暗 的 和 白光， 其 中 RGB 各 值 设 为 
0 一 1 的 相同 的 小 数 ，alpha 设置 为 1。 

定向 光 或 远 距 离 光 也 没有 源 位 置 ， 但 它 具 有 方 咎 。 它 可 以 用 来 模拟 光源 距离 非常 远 ， 以 
至 于 光线 接近 平行 的 情况 ， 例 如 阳光 。 通 常 在 这 种 情况 下 ， 我 们 可 能 只 对 建 模 光 照 感 兴趣 ， 
而 对 发 光 的 物体 不 感 兴趣 。 定 向 光 对 物体 的 影响 取决 于 光照 角度 ， 物 体 在 朝向 定向 光 的 一 
侧 比 在 切 向 或 相对 侧 更 亮 。 建 模 定向 光 需 要 指定 其 方向 (以 向 量 形式 ) 及 其 环境 、 漫 反射 
和 镜面 特征 (以 RGBA 值 )。 指 向 Z 轴 负 方 向 的 红色 定向 光 可 以 指定 如 下 : 


float dirLightAmbient[4] = { 0.1f, 0.0f, 0.0f, 1.0f }; 
float dirLightDiffuse[4] = { 1.0f, 0.0f, 0.0f, 1.0f p; 
float dirLightSpecular[4] = { 1.0f, 0.0f, 0.0f, 1.0f J; 
float dirLightDirection[3] = { 0.0f, 0.0f, -1.0f }; 


在 已 经 有 全 局 环境 光 的 情况 下 ， 定 向 光 的 环境 光 分 量 看 起 来 似乎 是 多 余 的 。 然 而 ， 当 光 
源 “开启 ”或 “关闭 ”时 ， 全 局 环境 光 和 定向 光 的 环境 光 分 量 的 区 别 就 很 明显 了 。 当 “ 开 
局 ”时 ， 总 环境 光 分 量 将 如 预期 的 那样 增加 。 上 面 的 例子 中 ， 我 们 只 使 用 了 很 小 的 环境 光 
分 量 。 在 实际 场景 中 ， 应 当 根 据 场景 的 需要 平衡 两 个 环境 光 分 量 。 

位 置 光 在 3D 场景 中 具有 特定 位 置 。 靠 近 场 景 的 光源 ， 例 如 人 台灯， 蜡烛 等 。 像 定向 光一 
样 ， 位 置 光 的 效果 取决 于 撞击 角度 ; 但 是 ， 它 没有 方向 ， 因 为 它 对 场景 中 的 每 个 顶点 的 光 
照 方向 都 不 同 。 位 置 光 还 可 以 包含 衰减 因子 ， 以 模拟 它们 的 强度 随 距 离 减 小 的 程度 。 与 我 
们 看 到 的 其 他 类 型 的 光源 一 样 ， 位 置 光 具有 指定 为 RGBA 值 的 环境 光 反 射 、 漫 反射 和 镜面 
反射 特性 。 位 置 〈$,2,-3) 处 的 红色 位 置 光 可 以 指定 如 下 例 ; 
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float posLightAmbient[4] = { 0.1f, 0.0f, 0.0f, 1.0f }; 
float posLightDiffuse[4] = { 1.0f, 0.0f, 0.0f, 1.0f }; 
float posLightSpecular[4] = { 1.0f,0.0f, 0.0f, 1.0f }; 
float posLightLocation[3] = { 5.0f, 2.0f, -3.0f£ }; 


衰减 因子 有 多 种 建 模 方式 。 其 中 一 种 方式 是 使 用 恒定 、 线 性 和 二 次 方 ( 分 别称 为 keo ki 

和 ky) 衰减， 并 引入 非 负 可 调 参 数 。 这 些 参数 与 离 光 源 的 距离 (4q) 结合 进行 计算 : 
1 

k, +k,d+k,d’ 

将 这 个 因子 与 光 的 强度 相 乘 可 以 使 距 光 更 远 时 ， 光 的 强度 衰减 更 多 。 注 意 ，k 应当 永远 
设置 为 大 于 等 于 1 的 值 ， 从 而 使 得 衰减 因子 落 入 [0...1] 区 间 ， 并 当 4 增 大 时 接近 于 0。 

KANT (spotlight) 同时 具有 位 置 和 方向 。 其 “ 锥 形 ” 效 果 可 以 使 用 O° ~90° WAZA 0 
来 模拟 ， 指 定 光束 的 半 宽 度 ， 并 使 用 衰减 指数 来 模拟 随 光 束 角 度 的 强度 变化 。 如 图 7.2 Pas, 
我 们 确定 聚光灯 方向 与 从 聚光灯 到 像素 的 向 量 之 间 的 角度 g。 当 9 小 于 9 时 ,我们 通过 将 9 
的 余弦 提高 到 衰减 指数 来 计算 强度 因子 ( 当 pg 大 于 9 时 ， 强 度 因 子 设置 为 0)。 结 果 是 强度 
因子 的 范围 为 0 一 1。 衰 减 指数 会 影响 当 角 度 g 增加 时 ， 强 度 因子 趋 于 0 的 速率 。 然 后 将 强 
度 因子 乘 以 光 的 强度 以 模拟 锥 形 效 果 。 


attenuationFactor = 


D = 聚光灯 方向 
V= 到 顶点 的 方向 


9 = RAH > 


b = 光 离 轴 角 


强度 因子 = cos P(o) a 
By 





图 7.2 聚光灯 参数 
位 于 〈5,2,-3) 向 下 照射 Z 轴 负 方 向 的 红色 聚光灯 可 以 表示 为 : 


float spotLightAmbient[4] = { 0.1f, 0.0f, 0.0f, 1.0f }; 
float spotLightDiffuse[4] = { 1.0f, 0.0f, 0.0f, 1.0f }; 
float spotLightSpecular[4] = { 1.0f,0.0f, 0.0f, 1.0f }; 
float spotLightLocation[3] = { 5.0f, 2.0f, -3.0f }; 
float spotLightDirection[3] = { 0.0f, 0.0f, -1.0f }; 


float spotLightCutoff = 20.0f; 
float spotLightExponent = 10.0f; 


聚光灯 也 可 以 引入 衰减 因子 。 我 们 没有 在 上 面 的 代码 中 展示 它们 ， 不 过 ， 聚 光 灯 衰减 因 
子 可 以 用 与 前 述 定向 光源 相同 的 方式 实现 。 历 史上 ， 自 1986 年 皮克斯 的 著名 动画 《小 台灯 》 
(Luxo Jr.) 出 现 起 ， 聚 光 灯 就 成 为 了 计算 机 图 形 学 的 标志 。 

当 设 计 拥 有 许多 光源 的 系统 时 ， 程 序 员 应 该 考虑 创建 相应 的 类 结构 ， 如 定义 Light 类 以 
及 其 子 类 GlobalAmbient, Directional, Positional 以 及 Spotlight。 由 于 聚光灯 同时 具有 定向 
光 和 位 置 光 的 特性 ， 这 里 就 值得 使 用 C++ 的 多 继承 能 力 ， 让 Spotlight 类 同时 继承 于 实现 位 
置 光 和 定向 光 的 类 。 在 示例 中 ， 由 于 内 容 足 够 简单 ， 因 此 我 们 在 当前 版 本 中 没有 加 入 这 种 
层次 结构 。 
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7.3 ”材质 


我 们 场景 中 物体 的 “外 观 ” 目 前 仅 使 用 颜色 和 纹理 进行 表现 。 增 加 的 光照 使 得 我 们 可 以 
加 入 表面 的 反射 特性 。 即 对 象 如 何 与 我 们 的 ADS 光照 模型 相互 作用 。 这 可 以 通过 将 每 个 对 
象 视 为 “由 某 种 材质 制 成 ”来 建 模 。 

通过 指定 经 熟悉 Re), Ay 
以 在 ADS across 第 四 种 叫 作 光泽 ， 正 如 我 们 将 要 看 到 的 那样 ， 它 被 用 来 为 
所 选材 质 建立 一 个 合适 的 镜面 高 光 。 目 前 许多 不 同类 型 的 常见 材质 已 经 有 ADS 和 光泽 度 值 
了 。 例 如 ， “emt” F 可 以 指定 如 下 : 

float pewterMatAmbient[4] = { .11f，.06f，.11f，1.0f }; 

float pewterMatDiffuse[4] = { .43f, .47f, .54f, 1.0f }; 


float pewterMatSpecular[4] = { .33f, .33f, .52f, 1.0f }; 
float pewterMatShininess = 9.85f; 


一 些 其 他 材质 的 ADS RGBA 值 见 图 7.3 

















CERO PARA 

有 时 候 一 些 其 他 特性 也 属于 材质 特性 。 透 
明度 由 RGBA 标准 中 的 第 四 个 (alpha) 通道 0.24725, 0.1995, 0.0745, 1.0 
的 不 透明 度 来 实现 。 取 值 为 1.0 是 表示 完全 0.75164, 0.60648, 0.22648, 1.0 

ri 0.62828, 0.5558, 0.36607, 1.0 

不 透明 ， 取 值 为 0 时 表示 完全 透明 。 对 于 大 ear 
多 数 材质 而 言 , 只 需要 把 不 透明 度 设置 为 1.0 arene dag 
就 行 了 ， 但 是 对 于 某 些 特定 的 材质 ， 加 入 一 0.3162, 0.3162, 0.3162, 0.95 
些 透 明度 是 很 重要 的 。 例 如 ， 图 7.3 中 材质 0.25, 0.20725, 0.20725, 0.922 
“ 玉 ” 和 “珍珠 ”都 含有 少量 透明 度 ( 取 值 略 1.00, 0.829, 0.829, 0.922 
微小 于 1.0) 以 显得 更 加 真实 。 0.2966, 0.2966, 0.2966, 0.922 

See Os 2 Bore ADE 料 尖 规范 中 spe ei 
在 模拟 自身 发 光 的 材质 〈 例 如 磷 光 材质 ) 时 050827 050827 0.50827, 1.0 
非常 有 用 。 

没有 纹理 的 物体 在 渲染 时 , 通常 需要 指定 图 7.3 其 他 材质 的 ADS 系数 


材质 特性 。 因此 , 预定 义 一 些 可 供 选 择 的 材质 , 在 使 用 时 会 很 方便 。 因 此 我 们 需要 在 Utils.cpp 
文件 中 添加 如 下 代码 : 


// 黄金 材质 一 环境 光 、 漫 反射 、 镜 面 反 射 和 光泽 

float * Utils::goldAmbient() { static float a[4] = { 0.2473f, 0.1995f, 0.0745f, 1 }; return 
(float, * ) az} 

float * Utils::goldDiffuse() { static float a[4] = { 0.7516f, 0.6065f, 0.2265f, 1 }; return 
(float * ) a; } 

float * Utils::goldSpecular() { static float a[4] = { 0.6283f, 0.5559f, 0.3661f, 1 }; return 
(float. ) ay } 

float Utils::goldShininess() { return 51.2f; } 


// 白银 材质 一 环境 光 、 漫 反射 、 镜 面 反射 和 光泽 
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float * Utils::silverAmbient() { static float a[4] = { 0.1923f, 0.1923f, 0.1923f, 1 }; return 
(£loat * ) a? } 

float * Utils::silverDiffuse() { static float al) = { 0.5075f, 0.5075f, 0.5075f, 1 }; return i 
(float * ) aş } 

float * Utils::silverSpecular() { static float a[4] = { 0.5083f, 0.5083f, 0.5083f, 1 }; return 
(fieat * | ap } 

float Utils::silverShininess() { return 51.2f; } | 


// 青铜 材质 一 环境 光 、 漫 反射 、 镜 面 反 射 和 光泽 

float * Utils::bronzeAmbient() { static float a[4] = { 0.2125f, 0.1275f, 0.0540f, 1 }; return 
(float * ) a; } 

float * Utils::bronzeDiffuse() { static float a[4] = { 0.7140f, 0.4284f, 0.1814f, 1 }; return | 
(flipat +.) ae} 

float * Utils::bronzeSpecular() { static float a[4] = { 0.3936f, 0.2719f, 0.1667f, 1 }; return 
(float * ) az } 

float Utils::bronzeShininess() { return 25.6f; } 


这 样 在 init0 函 数 中 或 全 局 中 为 物体 指定 “黄金 ”材质 就 非常 容易 了 ， 如 下 所 示 。 


float* matAmbient = Utils::goldAmbient (); 
float* matDiffuse = Util::goldDiffuse(); 
float* matSpecular = util.goldSpecular(); | 
float matShininess = util.goldShininess(); i 


注意 ， 目 前 为 止 的 各 小 节 中 ， 我 们 所 用 来 实现 的 光照 和 材质 特性 的 代码 并 没有 引入 光 | 
照 。 这 些 代 码 仅仅 提供 了 用 于 描述 并 存储 场景 中 元 素 所 需 光 照 和 材质 特性 的 一 种 方式 。 我 
们 仍然 需要 自己 计算 光照 。 编写 计算 光照 的 代码 需要 在 我 们 的 着 色 器 代码 中 引入 一 些 严 肃 
的 数学 过 程 。 因 此 ， 让 我 们 先 来 看 看 在 C++/OpenGL 和 GLSL 图 形 程序 中 实现 ADS 光照 。， 
的 基础 。 


7.4 ADS 光照 计算 


当 我 们 绘制 场景 时 ， 每 个 顶点 坐标 都 会 进行 变换 以 将 3D 世界 模拟 到 2D 屏幕 上 。 每 个 
像素 的 颜色 都 是 光栅 化 、 纹 理 贴 图 以 及 插值 的 结果 。 现 在 我 们 需要 加 入 一 个 新 的 步骤 来 调 
整 这 些 光栅 化 之 后 的 像素 颜色 ， 以 便 反 应 场景 中 的 光照 和 材质 。 我 们 需要 做 的 基础 ADS 计 
算是 确定 每 个 像素 的 反射 强度 (Reflection Intensity，I)。 计 算 过 程 如 下 : 

I I 十 了 +I 


我 们 需要 计算 每 个 光源 对 于 每 个 像素 的 环境 光 反 射 、 漫 反射 和 镜面 反射 分 量 ， 并 求 和 。 
当然 ， 这 些 计算 都 基于 场景 内 的 光源 类 型 以 及 演 染 中 模型 的 材质 类 型 。 
环境 光 分 量 是 最 简单 的 。 它 的 值 是 场景 环境 光 与 材质 环 境 光 分 量 的 乘积 : 
Tomie ~ Lehi * Material, vient 
请 记 住 光 与 材质 亮度 都 是 RGB 值 ， 计 算 可 以 更 准确 地 描述 为 : 
1™ = Light, * Material’ 


ambient 


ambient ambient ambient 
green = . green * . green 
I ambient — L ight aient Material vien 
blue > blue - „Jblue 
= * 
I ambient ~ L 1g) h ambient Material vien 
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漫 反射 分 量 会 更 复杂 一 些 ， 因 为 它 基 于 光 对 于 平面 的 入 射 角 。 朗 伯 余 弦 定 律 〈1760 年 出 
版 ) 确定 了 表面 反射 的 光量 与 光 入 射 角 的 余弦 成 正比 。 可 以 建 模 为 如 下 公式 : 
Iams = Light itse * Material itise * COS(A) 
与 上 面 的 计算 相同 ， 实 际 计算 中 所 用 到 的 是 红 、 绿 、 蓝 分 量 。 
确定 入 射 角 9 需要 (a) 求解 从 所 绘制 向 量 到 光源 的 向 
量 (或 者 与 光照 方向 相反 的 向 量 )，(b) 求解 所 泻 染 物体 a SE 


表面 的 法 垂直) 向量 。 让 我 们 将 其 分 别称 为 工 和 N， 如 SN 
图 7.4 所 示 。 
基于 场景 中 光 的 物理 特性 ， 向 量 志 可 以 通过 对 光照 广 i 
向 向 量 取 反 ， 或 通过 计算 像素 位 置 到 光源 位 置 的 向 量 得 4 
到 。 计 算 向 量 N 会 麻烦 一 些 一 一 法 向 量 有 可 能 已 经 在 模型 ek 
中 给 出 了 , 但 是 如 果 模 型 没有 给 出 法 向 量 N， 那 么 就 需要 
基于 周围 项 点 位 置 ， 在 几何 上 对 向 量 N 进行 估计 。 在 本 图 74 入 射 角 


章 剩 下 的 内 容 中 ， 我 们 假设 所 泻 染 的 模型 每 个 顶点 都 包含 法 向量 〈 使 用 建 模 工 具 如 MAYA 
或 Blender 创建 的 模型 ， 通 常 都 包含 法 向 量 )。 

事实 上 ， 在 计算 法 向 量 时 ， 没 必要 计算 出 2 角 本 身 的 角度 。 我 们 真正 需要 的 是 cos(0)。 

在 第 3 章 中 讲 过 ， 这 可 以 通过 点 乘 计算 得 出 。 因 此 ， 漫 反射 分 量 可 以 通过 如 下 公式 得 出 : 
Tinne = Light ime * Materidl ioe * (Ñ e L) 
漫 反 射 分 量 仅 当 表面 暴露 在 光照 中 时 起 作用 ， 即 当 -90 < 6 < 90，cos(0) > 0 时 。 因 此 ， 
我 们 需要 将 之 前 等 式 的 最 右 项 替换 为 : 
max((N e L), 0) 
镜面 反射 分 量 决定 所 泻 染 的 像素 是 否 需 要 作为 
“镜面 高 光 ” 的 一 部 分 变 亮 。 它 不 止 与 光源 的 入 射 角 
相关 ， 也 与 光 在 表面 上 的 反射 角 以 及 观察 点 与 反光 
表面 之 间 的 夹 角 相 关 。 

在 图 7.5 中 ，R 代表 光 反 射 的 方向 ， 玉 〈 叫 作 观 
察 向 量 view vector) 是 从 像素 到 眼睛 的 向 量 。 注 意 ， 
广 是 对 从 眼睛 到 像素 的 向 量 取 反 (在 相机 空间 中 , 眼 
睛 位 于 原点 )。 在 R 与 VV 之 间 的 小 夹 角 9g 越 小 , 眼睛 
越 靠 近 光 轴 ， 或 者 说 看 向 反射 光 ， 因 此 像素 的 镜面 图 7.5 观察 点 入 射 角 
高 光 分 量 也 就 越 大 (像素 看 来 应 该 更 亮 )。 

o 用 于 计算 镜面 反射 分 量 的 方式 取决 于 所 泻 染 物 体 的 “光泽 度 ”。 极 端 内 亮 的 物体 ， 如 
镜子 ， 其 镜面 高 光 非 常 小 一 一 它们 将 入 射 的 光 直 接 反射 给 了 眼睛 。 不 那么 内 亮 的 物体 ， 其 镜 
面 高 光 会 扩散 开 来 ， 因 此 高 光 会 包含 更 多 的 像素 。 

反光 度 通常 用 衰减 函数 来 建 模 ， 这 个 衰减 函数 用 来 表达 随 着 角度 o 的 增 大 , 镜面 反射 分 
量 降低 到 0 的 速度 。 我 们 可 以 用 cos(p) 来 对 衰减 进行 建 模 ， 通 过 余弦 函数 的 乘 方 来 增 减 反光 
度 ， 如 coslo), cos” (g), cos*(g), cos (o), cos”(g) 等 ， 如 图 7.6 所 示 。 
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cos(¢) 
SS cos’(9) 
< cos*(¢) 
NN cos”?( o) 
MASSA 


图 7.6 以 余弦 指数 建 模 的 反光 度 


TER, 指数 中 的 阶 数 越 高 , 衰减 越 快 , 因此 在 视角 光 轴 外 的 反光 像素 镜面 反射 分 量 越 小 。 
我 们 将 衰减 函数 cos"(g) 中 的 指数 n 叫 作 材 质 的 反光 度 因子 。 注意 在 之 前 的 图 7.3 中 , 每 个 材 
质 的 反光 度 因 子 在 最 右 列 给 出 。 

现在 我 们 可 以 给 出 完整 的 镜面 反射 计算 : 

Lp = Light,,.. * Material... * max(0, (ReV)’) 


注意 ， 与 之 前 计算 漫 反 射 一 样 ， 我 们 使 用 了 max() 函 数 。 在 本 例 中 ， 我 们 需要 确保 镜面 
反射 分 量 不 使 用 cos(g) 所 产生 的 负 值 ， 如 果 使 用 了 负 值 ， 则 会 有 奇怪 的 伪 影 ， 如 “ 暗 ” 镜 面 
高 光 。 

同时 ， 如 之 前 一 样 ， 真 正 的 计算 中 包含 了 红 、, 绿 、 蓝 3 个 分 量 。 
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在 7.4 节 中 所 讲述 的 计算 目前 为 止 都 是 理论 上 的 ， 其 中 包含 的 假设 是 ， 我 们 可 以 对 每 个 
像素 都 实行 这 些 操 作 。 但 是 真实 情况 会 更 复杂 ， 通 常 模型 中 只 有 用 来 定义 模型 的 顶点 才 有 
法 向 量 CNV)， 而 非 每 个 像素 都 有 。 因 此 我 们 要 么 需要 计算 每 个 像素 的 法 向 量 ， 这 会 非常 耗 
时 ， 要 么 需要 使 用 其 他 方法 对 所 需 的 值 进行 估计 ， 以 实现 足够 好 的 效果 。 

其 中 一 种 途径 称 为 “ 面 片 着 色 ” 或 “平坦 着 色 ”。 这 里 我 们 假定 所 演 染 图 元 〈 如 多 边 形 
或 三 角形 ) 中 每 个 像素 的 光照 值 都 一 样 。 因 此 我 们 只 需要 对 模型 每 个 多 边 形 的 一 个 顶点 进 
行 光照 计算 ， 然 后 以 每 个 多 边 形 或 每 个 三 角形 为 基础 ， 将 计算 结果 的 光照 值 复制 到 相 邻 的 
像素 中 。 

现在 面 片 着 色 几 乎 已 经 不 再 使 用 ， 因 为 其 泻 染 结果 看 来 不 够 真实 ， 同 时 现代 硬件 已 经 可 
以 进行 更 加 精确 的 计算 了 。 图 7.7 中 展示 了 一 个 面 片 着 色 环 面 的 例子 ， 其 中 每 个 三 角形 都 作 
为 平坦 的 反射 表面 。 

虽然 某 些 情况 下 ， 面 片 着 色 可 能 已 经 够 用 了 (或 者 故意 使 用 其 效果 )， 但 是 通常 “平滑 
着 色 ” 是 一 种 更 好 的 途径 。 在 平滑 着 色 的 过 程 中 ， 会 对 每 个 像素 计算 光照 强度 。 现 代 显 卡 
的 并 行 处 理 功 能 ， 以 及 OpenGL 图 形 管线 中 的 插值 泻 染 让 平滑 着 色 变 得 可 行 。 

我 们 将 会 观察 两 个 流行 的 平滑 着 色 方 法 : Gouraud 着 色 和 Phong 着 色 。 
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图 7.7 面 片 着 色 的 环 面 


7.5.1 Gouraud 着 色 ( 双 线 性 光 强 插值 法 ) 


法 国 计 算 机 科学 家 Henri Gouraud 在 1971 年 发 表 的 平滑 着 色 算 法 后 来 被 称 为 Gouraud 着 
色 [G070。 由 于 使 用 了 3D 图 形 管线 (如 OpenGL) 中 的 自动 插值 泻 染 ， 它 特别 适用 于 现代 显 
卡 。Gouraud 着 色 过 程 如 下 。 

(1) 确定 每 个 顶点 的 颜色 ， 以 及 光照 相关 计算 。 

(2) 允许 正常 的 光栅 化 过 程 在 插入 像素 时 对 颜色 也 进行 插值 (同时 也 对 光照 进行 插值 )。 

在 OpenGL 中 ， 这 表示 大 多 数 光 照 计 算 都 是 在 顶点 着 色 器 中 完成 的 ,片段 着 色 器 仅 做 传 
递 并 展示 自动 揪 值 的 光照 后 的 颜色 。 

图 7.8 展示 了 在 场景 中 包含 环 面 和 单一 位 置 光 的 情况 下 ， 我 们 将 会 用 来 在 OpenGL 中 实 
现 Gouraud 着 色 器 的 策略 。 程 序 7.1 中 实现 了 这 个 策略 。 

JOGLUava) 代 码 顶点 着 色 器 片段 着 色 器 


1. 根据 顶点 计算 和 NV、 

L、V 和 R 向 量 
2. 计算 4、D、 5 分 量 传 入 插值 : 
3. 输出 属性 - 颜色 


放 入 缓冲 区 : 
1. 模型 顶点 
2. 顶点 法 向 量 


放 入 统一 变量 : 
1. MV 和 PROJ 和 矩阵 变换 
2. 光照 和 材质 特性 


- 光照 后 的 颜色 - 位置 
- gl_position 





图 7.8 实现 Gouraud 着 色 


程序 7.1 位 置 光 和 Gouraud 着 色 器 下 的 环 面 








C++/OpenGL 应 用 程序 


#include "Torus.h" 
#include "Utils.h" 


// 用 于 创建 着 色 器 和 泻 染 程序 的 声明 ， 如 前 

// VAO、 两 个 VBO 以 及 环 面 的 声明 ， 如 前 

// 环 面 与 相机 位 置 的 声明 和 赋值 ， 如 前 

// Utils.cpp 中 现在 已 经 添加 有 金 、 银 、 青 铜 材质 


// 为 display() 函数 分 配 变 量 
GLuint mvLoc, projLoc, nLoc; 
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// 着 色 器 统一 变量 中 的 位 置 
GLuint globalAmbLoc, ambLoc, diffLoc, specLoc, posLoc, mAmbLoc, mDiffLoc, mSpecLoc, mShiLoc; 


glm::mat4 pMat, vMat, mMat, mvMat, invTrMat; 
glm::vec3 currentLightPos, lightPosv; // 在 模型 和 视觉 空间 中 的 光照 位 置 ，Vector3f 类 型 
float lightPos[3]; // 光照 位 置 的 浮 点 数组 


// 初始 化 光照 位 置 
glm: :vec3 initialLightLoc = glm::vec3(5.0f, 2.0f, 2.0£); 


// 白光 特性 

float globalAmbient[4] = { 0.7f, 0.7£f, 0.7f, 1.0f }; 
float lightAmbient[4] = { 0.0f, 0.0f, 0.0f, 1.0f }; 

float lightDiffuse[4] = { 1.0f, 1.0f, 1.0f, 1.0£ }; 

float lightSpecular[4] = { 1.0f, 1.0£, 1.0£, 1.0£ }; 


// 黄金 材质 特性 

float* matAmb = Utils::goldAmbient (); 

float* matDif = Utils::goldDiffuse(); 

float* matSpe = Utils::goldSpecular(); 
float matShi = Utils::goldShininess(); 


void setupVertices(void) { 
// 该 函数 与 之 前 章节 中 的 相同 ， 没 有 改动 
// 下 面 的 部 分 在 这 里 出 现 是 为 了 更 清晰 ， 现 在 我 们 将 真 的 使 用 法 向 量 


glBindBuffer (GL ARRAY BUFFER, vbo[2]); 
glBufferData(GL_ARRAY BUFFER, nvalues.size() * 4, &nvalues[0], GL_STATIC_DRAW); 


} 


void display (GLFWwindow* window, double currentTime) { 


// 清除 深度 缓冲 区 ， 如 之 前 例子 中 一 样 载 入 泻 染 程序 


// 用 于 模型 -视图 变换 、 投 影 以 及 逆转 置 (法 向 量 ) 矩阵 的 统一 变量 

mvLoc = glGetUniformLocation(renderingProgram, "mv matrix"); 
projLoc = glGetUniformLocation(renderingProgram, "proj matrix"); 
nLoc = glGetUniformLocation(renderingProgram, "norm matrix"); 


// 初始 化 投影 及 视图 矩阵 ， 如 前 例 


// 基于 环 面 位 置 ， 构 建 模型 矩阵 
mMat = glm:;:translate(glm::mat4(1.0f), glm::vec3(torLocX, torLocY, torLocZ)); 


// 旋转 环 面 以 便 更 容易 看 到 
mMat *= glm::rotate(mMat, toRadians(35.0f), glm::vec3(1.0f, 0.0f, 0.0f)); 


// 基于 当前 光源 位 置 ， 初 始 化 光照 

currentLightPos = glm::vec3(initialLightLoc.x, initialLightLoc.y, initialLightLoc.z); 
installLights (vMat) ; 

// 通过 合并 矩阵 v 和 m， 创 建 模型 -视图 (MV) 矩阵 ， 如 前 


mvMat = VMat * mMat; 


// 构建 MV 矩阵 的 逆转 置 矩 阵 ， 以 变换 法 向 量 


invTrMat = glm::transpose(glm::inverse(mvMat) ) ; 


// 将 MV、PROJ 以 及 逆转 置 (法 向 量 ) 矩阵 传 入 相应 的 统一 变量 
glUniformMatrix4fv(mvLoc, 1, GL FALSE, glm::value_ptr(mvMat) ) ; 
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glUniformMatrix4fv(projLoc, 1, GL FALSE, glm::value_ptr(pMat)); 
glUniformMatrix4fv(nLoc, 1, GL FALSE, glm::value_ptr(invTrMat) ); 


// 在 顶点 着 色 器 中 ， 将 顶点 缓冲 区 (VBO #0) 绑 定 到 项 点 属性 #0 
glBindBuffer (GL ARRAY BUFFER, vbo[0]); 
glVertexAttribPointer(0, 3, GL FLOAT, false, 0, 0); 
glEnableVertexAttribArray (0); 


// 在 顶点 着 色 器 中 ， 将 法 向 缓冲 区 (VBO #2) 绑 定 到 顶点 属性 #1 
glBindBuffer (GL ARRAY BUFFER, vbo[2]); 
glVertexAttribPointer(1, 3, GL FLOAT, false, 0, 0); 
glEnableVertexAttribArray (1); 


glEnable (GL CULL FACE); 
glFrontFace (GL CCW); 

glEnable (GL DEPTH TEST); 
glDepthFunc (GL_LEQUAL) ; 


glBindBuffer (GL ELEMENT ARRAY BUFFER, vbo[3]); 
glDrawElements(GL_TRIANGLES, myTorus.getNumIndices(), GL UNSIGNED INT, 0); 


void installLights(glm::mat4 vMatrix) { 


// 将 光源 位 置 转 换 为 视图 空间 坐标 ， 并 存 入 浮 点 数组 


lightPosV = glm::vec3(vMatrix * glm::vec4(currentLightPos, 1.0)); 
lightPos[0] = lightPosV.x; 
lightPos[1] = lightPosV.y; 
lightPos[2] = lightPosV.z; 


// 在 着 色 器 中 获取 光源 位 置 和 材质 属性 

globalAmbLoc = glGetUniformLocation(renderingProgram, "globalAmbient") ; 
ambLoc = glGetUniformLocation(renderingProgram, "light.ambient") ; 
diffLoc = glGetUniformLocation(renderingProgram, "light.diffuse") ; 
specLoc = glGetUniformLocation(renderingProgram, "light.specular"); 
posLoc = glGetUniformLocation(renderingProgram, "light.position"); 
mAmbLoc = glGetUniformLocation(renderingProgram, "material.ambient") ; 
mDiffLoc = glGetUniformLocation(renderingProgram, "material.diffuse") ; 
mSpecLoc = glGetUniformLocation(renderingProgram, "material.specular") ; 
mShiLoc = glGetUniformLocation(renderingProgram, "material.shininess") ; 


// 在 着 色 器 中 为 光源 与 材质 统一 变量 赋值 


glProgramUniform4fv(renderingProgram, 
glProgramUniform4fv(renderingProgram, 
gl ProgramUniform4fv(renderingProgram, 
glProgramUniform4fv(renderingProgram, 
g1ProgramUniform3fv (renderingProgram, 
g1ProgramUniform4 fv (renderingProgram, 
glProgramUniform4fv(renderingProgram, 
glProgramUniform4 fv (renderingProgram, 


globalAmbLoc, 1, globalAmbient) ; 
ambLoc, 1, lightAmbient) ; 
diffLoc, 1, lightDiffuse) ; 
specLoc, 1, lightSpecular) ; 
posLoc, 1, lightPos); 

mAmbLoc, 1, matAmb) ; 

mDiffLoc, 1, matDif) ; 

mSpecLoc, 1, matSpe) ; 


glProgramUniformlf(renderingProgram, mShiLoc, matShi) ; 


} 
// init() UR main() 函数 如 前 


程序 7.1 中 的 很 多 元 素 我 们 都 已 经 熟悉 了 。 首 先 ， 定 义 了 环 面 、 光 照 和 材质 特性 。 接 着 
将 环 面 顶 点 以 及 相关 法 向 量 读 入 缓冲 区 。display0O) 函 数 与 之 前 程序 中 的 类 似 ， 在 这 里 不 同 的 
是 它 同 时 也 将 光照 和 材质 信息 传 入 顶点 着 色 器 。 为 了 传 入 这 些 信息 ， 它 调用 installLights(), 
将 光源 在 视觉 空间 中 的 位 置 , 以 及 材质 的 ADS 特性 , 读 入 相应 的 统一 变量 以 供 着 色 器 使 用 。 
注意 ， 我 们 提前 定义 了 这 些 统一 位 置 变量 ， 以 求 更 好 的 性 能 。 
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其 中 一 个 重要 的 细节 是 变换 矩阵 MV， 用 来 将 顶点 位 置 移动 到 视觉 空间 ， 但 它 并 不 总 能 
正确 地 将 法 向 量 也 调整 进 视觉 空间 。 直 接 对 法 向 量 应 用 MV 和 矩 阵 不 能 保证 法 向 量 依然 与 物 
体 表 面 垂 直 。 正 确 的 变换 是 MV 的 逆转 置 矩 阵 ， 在 第 3 章 “ 补 充 说 明 ” 中 有 描述 。 在 程序 7.1 
中 ， 这 个 新 增 的 矩阵 叫 作 “invTrMat”， 通 过 统一 变量 传 入 着 色 器 。 

变量 lightPosV 包含 光源 在 相机 空间 中 的 位 置 。 我 们 每 帧 只 需要 计算 一 次 ， 因 此 我 们 在 
installLights() 中 [在 display0 中 调用 ] 而 非 着 色 器 中 计算 。 着 色 器 在 下 方 的 续 程 序 7.1 中 。 其 中 
顶点 着 色 器 使 用 了 一 些 我 们 目前 没有 见 过 的 符号 。 注 意 ， 在 顶点 着 色 器 最 后 进行 了 向 量 加 
法 一 一 在 第 3 章 中 有 讲 ， 并 且 在 GLSL 中 可 用 。 我 们 将 会 在 展示 着 色 器 之 后 讨论 其 他 符号 。 


续 程 序 7.1 
顶点 着 色 器 


#version 430 

layout (location=0) in vec3 vertPos; 
layout (location=1) in vec3 vertNormal; 
out vec4 varyingColor; 


struct PositionalLight 
{ vec4 ambient; 

vec4 diffuse; 

vec4 specular; 

vec3 position; 
}; 
struct Material 
{ vec4 ambient; 

vec4 diffuse; 

vec4 specular; 

float shininess; 
}; 
uniform vec4 globalAmbient; 
uniform PositionalLight light; 
uniform Material material; 
uniform mat4 mv matrix; 
uniform mat4 proj matrix; 
uniform mat4 norm matrix; // 用 来 变换 法 向 量 


void main (void) 
{ vec4 color; 


// 将 顶点 位 置 转换 到 视觉 空间 

// 将 法 向 量 转换 到 视觉 空间 

// 计算 视觉 空间 光照 向 量 (从 项 点 到 光源 ) 

vec4 P = mv_matrix * vec4(vertPos,1.0); 

vec3 N = normalize((norm matrix * vec4(vertNormal,1.0)).xyz); 
vec3 L = normalize(light.position - P.xyz); 


// 视觉 向 量 等 于 视觉 空间 中 的 负 项 点 位 置 


vec3 V = normalize(-P.xyz); 


// R 是 -L 的 相对 于 表面 向 量 N 的 镜像 
vec3 R = reflect(-L,N); 


// 环境 光 、 漫 反射 和 镜面 反射 分 量 
vec3 ambient = ((globalAmbient * material.ambient) + (light.ambient * material.ambient) ) .xyz; 
vec3 diffuse = light.diffuse.xyz * material.diffuse.xyz * max(dot(N,L), 0.0); 
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vec3 specular = 
material.specular.xyz * light.specular.xyz * pow(max(dot(R,V), 0.0f), material.shininess) ; 


// 将 颜色 输出 发 送 到 片段 着 色 器 


varyingColor = vec4((ambient + diffuse + specular), 1.0); 


// 将 位 置 发 送 到 片段 着 色 器 ， 如 前 


gl_Position = proj matrix * mv _ matrix * vec4(vertPos,1.0); 


片段 着 色 器 


#version 430 
in vec4 varyingColor; 
out vec4 fragColor; 


// 与 顶点 着 色 器 相同 的 统一 变量 
// 但 并 不 直接 在 当前 片段 着 色 器 使 用 


struct PositionalLight 
{ vec4 ambient; 

vec4 diffuse; 

vec4 specular; 

vec3 position; 
}; 
struct Material 
{ vec4 ambient; 

vec4 diffuse; 

vec4 specular; 

float shininess; 
} 
uniform vec4 globalAmbient; 
uniform PositionalLight light; 
uniform Material material; 
uniform mat4 mv_matrix; 
uniform mat4 proj_matrix; 
uniform mat4 norm matrix; 


void main(void) 


{ fragColor = varyingColor; 


} 


程序 7.1 的 输出 如 图 7.9 所 示 。 





图 7.9 Gouraud 着 色 的 环 面 
顶点 着 色 器 代码 中 有 我 们 第 一 次 使 用 了 结构 体 语 法 的 示例 。GLSL“ 结 构 体 ”就 像 一 个 
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数据 类 型 ， 它 有 名 称 和 一 组 字段 。 当 使 用 结构 体 名 称 声 明 变 量 时 ， 这 个 变量 将 包含 结构 体 
中 声明 的 字段 ， 并 可 以 通过 “.” 语 法 访问 字段 。 例 如 ， 变 量 “light” 声 明 为 “PositionalLight” 
类 型 ， 因 此 我 们 可 以 在 其 后 引用 其 字段 light.ambient，light.diffuse 等 。 

还 要 注意 字段 选择 器 符号 “.xyz”， 我 们 在 顶点 着 色 器 中 的 多 个 地 方 都 使 用 了 这 种 语法 。 
这 是 将 vec4 转换 为 仅 包含 其 前 3 个 元 素 的 等 效 vec3 的 快捷 方式 。 

绝 大 多 数 光 照 计 算 发 生 在 顶点 着 色 器 中 。 对 于 每 个 顶点 ， 将 适当 的 矩阵 变换 应 用 于 顶点 
位 置 和 相关 的 法 向 量 ， 并 计算 用 于 光 方 向 (L〉 和 反射 (R)〉 的 向 量 。 然 后 执行 7.4 节 中 描 
述 的 ADS 计算 ,得 到 每 个 顶点 的 颜色 (代码 中 名 为 varyingColor)。 颜 色 作为 正常 光栅 化 过 
程 的 一 部 分 进行 插值 。 之 后 片段 着 色 器 仅 作为 简单 传递 。 宛 长 的 统一 变量 声明 列表 也 在 片 
段 着 色 器 中 《由 于 前 面 第 4 章 中 描述 的 原因 )， 但 实际 上 并 没有 在 那里 使 用 它们 。 

注意 GLSL 函数 normalize0)， 它 用 来 将 向 量 转换 为 单位 长 度 。 正 确 地 进行 点 积 运 算 必须 
要 先 使 用 该 函数 。reflect0 函 数 则 计算 一 个 向 量 基 于 另 一 个 向 量 的 反射 。 

图 7.9 输出 的 环 面 中 有 很 明显 的 伪 影 。 其 镜面 高 光 有 着 块 状 、 面 片 感 。 这 种 伪 影 在 物体 
移动 时 会 更 加 明显 (但 我 们 在 书 中 没 法 展示 移动 的 物体 )。 

Gouraud 着 色 也 容易 受到 其 他 伪 影 影响 。 如 果 镜 面 高 光 整 个 范围 都 在 模型 中 的 一 个 三 角 
形 内 一 一 即 高 光 范 围 内 一 个 模型 顶点 也 没有 一 一 那么 它 可 能 不 会 被 泻 染 出 来 。 由 于 镜面 反射 
分 量 是 依 顶 点 计算 的 ， 因 此 ， 当 模型 所 有 顶点 都 没有 镜面 反射 分 量 时 ， 其 光栅 化 后 的 像素 
也 不 会 有 镜面 反射 光 。 





7.5.2 Phong 着 色 


Bui Tuong Phong 在 犹他 大 学 的 研究 生 期 间 开 发 了 一 种 平滑 的 着 色 算 法 ， 在 1973 年 的 论 
文中 中 对 其 进行 了 描述 ， 并 在 中 中 发 表 。 该 算法 的 结构 类 似 于 Gouraud 着 色 的 算法 ， 其 
不 同 之 处 在 于 光照 计算 是 按 像素 而 非 顶 点 完成 。 由 于 光照 计算 需要 法 向 量 N 和 光 向 量 L, 
但 在 模型 中 仅 顶 点 包含 这 些 信息 ， 因 此 Phong 着 色 通 常 使 用 巧妙 的 “技巧 ”来 实现 , 其 中 入 
和 工 在 顶点 着 色 器 中 进行 计算 ， 并 在 光栅 化 期 间 插值 。 图 7.10 概述 了 此 策略 。 


JOGL(Java) 代 码 顶点 着 色 器 片段 着 色 器 


(与 Gouraud 着 色相 同 ) 





7.10 ”实现 Phong 着 色 


C++/OpenGL 代码 完全 如 前 。 之 前 部 分 在 顶点 着 色 器 中 完成 的 过 程 现在 回放 入 片段 着 色 
器 中 进行 。 法 向 量 插值 的 效果 如 图 7.11 所 示 。 

现在 我 们 已 经 准备 好 使 用 Phong 着 色 实 现 位 置 光照 射 下 的 环 面 了 。 大 多 数 代码 与 实现 
Gouraud 着 色 的 代码 相同 。 由 于 C++/OpenGL 代码 完全 没有 改变 , 在 此 我 们 只 展示 修改 过 的 
顶点 着 色 器 和 片段 着 色 器 ， 见 程序 7.2。 程 序 7.2 的 输出 如 图 7.12 所 示 ，Phong 着 色 修正 了 
Gouraud 着 色 中 出 现 的 伪 影 。 





| 
| 
| 
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图 7.11 法 向 量 插值 


程序 7.2 Phong 着 色 的 环 面 
顶点 着 色 器 





#version 430 
layout (location=0) in vec3 vertPos; 
layout (location=1) in vec3 vertNormal; 


out vec3 varyingNormal; // 视觉 空间 顶点 法 向 量 
out vec3 varyingLightDir; // 指向 光源 的 向 量 
out vec3 varyingVertPos; // 视觉 空间 中 的 顶点 位 置 


// 结构 体 和 统一 变量 与 Gouraud 着 色相 同 


void main (void) 

{ // 输出 顶点 位 置 、 光 照 方向 和 法 向 量 到 光栅 器 以 进行 插值 
varyingVertPos=(mv_matrix * vec4(vertPos,1.0)).xyz; 
varyingLightDir = light.position - varyingVertPos; 
varyingNormal=(norm matrix * vec4(vertNormal,1.0)).xyz; 


gl_Position=proj matrix * mv_matrix * vec4(vertPos,1.0); 


} 
片段 着 色 器 


#version 430 

in vec3 varyingNormal; 
in vec3 varyingLightDir; 
in vec3 varyingVertPos; 
out vec4 fragColor; 


// 结构 体 和 统一 变量 与 Gouraud 着 色相 同 


void main(void) 

{ // 正规 化 光照 向 量 、 法 向 量 、 视 觉 向 量 
vec3 L = normalize(varyingLightDir) ; 
vec3 N = normalize (varyingNormal) ; 
vec3 V = normalize (-varyingVertPos) ; 


// 计算 光照 向 量 基 于 N 的 反射 向 量 

vec3 R = normalize(reflect(-L, N)); 
// 计算 光照 与 平面 法 向 量 间 的 角度 

float cosTheta = dot(L,N); 

// 计算 视觉 向 量 与 反射 光 向 量 的 角度 

float cosPhi = dot(V,R); 


// 计算 ADS 分 量 ( 按 像素 ) ， 并 合并 以 构建 输出 颜色 


图 7.12 





Phong 着 色 的 环 面 
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vec3 ambient = ((globalAmbient * material.ambient) + (light.ambient * material.ambient)) .xyz; 
vec3 diffuse = light.diffuse.xyz * material.diffuse.xyz * max(cosTheta,0.0); 
vec3 specular = 

light.specular.xyz * material.specular.xyz * pow(max(cosPhi,0.0), material.shininess) ; 


fragColor = vec4((ambient + diffuse + specular), 1.0); 


虽然 Phong 着 色 有 着 比 Gouraud 着 色 更 真实 的 效果 , 但 这 是 建立 在 增 大 性 能 消耗 的 基础 
上 的 ,James Blinn 在 1977 年 提出 了 一 种 对 于 Phong 着 色 的 优化 方法 四 人 ,被 称 为 Blinn-Phong 
反射 模型 。 这 种 优化 是 基于 观察 到 Phong 着 色 中 消耗 最 大 的 计算 之 一 是 解 出 反射 问 量 R。 

Blinn 发 现 向 量 R 在 计算 过 程 中 并 不 是 必需 的 一 一 R 只 是 用 来 计算 角 o WFR. fio 的 
计算 可 以 不 用 向 量 R， 而 通过 工 与 亚 的 角 平 分 线 向 量 互 得 到 。 如 图 7.13 Pras, WAIN Z 
AA a 刚好 等 于 12(o)。 虽 然 a 与 9 不同, 18 Blinn 展示 了 使 用 a 代替 o 就 已 经 可 以 获得 
足够 好 的 结果 。 

角 平 分 线 向 量 可 以 简单 地 使 用 Lt 得 到 〈( 见 图 7.14)， 之 后 cos(a) 可 以 通过 万 。N 的 点 
积 计算 。 





图 7.13 Blinn-Phong 反射 图 7.14 Blinn-Phong 计算 


这 些 计 算 可 以 在 片段 着 色 器 中 进行 ， 甚 至 为 了 性 能 考虑 〈 经 过 一 些 调整 ) 也 可 以 在 顶点 
着 色 器 中 进行 。 图 7.15 展示 了 使 用 Blinn-Phong 着 色 的 环 面 。 它 在 图 形 质量 上 几乎 与 Phong 
泻 染 相同 ， 同 时 节省 了 大 量 性 能 损耗 。 





7.15 Blinn-Phong 着 色 的 环 面 
程序 7.3 中 展示 了 修改 后 顶点 着 色 器 和 片段 着 色 器 ， 它 们 用 来 将 程序 7.2 中 的 Phong 着 
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色 示 例 转 换 为 Blinn-Phong 着 色 。C++/OpenGL 代码 与 之 前 一 样 没有 变化 。 
程序 7.3 Blinn-Phong 着 色 的 环 面 





/7 角 平分 线 向 量 日 作为 新 增 的 输出 


out vec3 varyingHalfVector; 


void main(void) 
{ // 与 之 前 的 计算 相同 ， 增 加 了 Lev 的 计算 
varyingHalfVector = (varyingLightDir + (-varyingVertPos) ) .xyz; 


} 


片段 着 色 器 


in vec3 varyingHalfVector; 


void main(void) 

{ // 注意 ， 现 在 已 经 不 需要 在 片段 着 色 器 中 计算 R 
vec3 L = normalize(varyingLightDir) ; 
vec3 N = normalize (varyingNormal) ; 
vec3 V = normalize (-varyingVertPos) ; 
vec3 H = normalize(varyingHalfVector) ; 


// 计算 法 向 量 N 与 角 平 分 线 向 量 H 之 间 的 角度 
float cosPhi = dot(H,N); 


// 角 平 分 线 向 量 8 已 经 在 顶点 着 色 器 中 计算 过 ， 并 在 光栅 器 中 进行 过 插值 
vec3 ambient = ((globalAmbient * material.ambient) + (light.ambient * material.ambient) ).xyz; 
vec3 diffuse = light.diffuse.xyz * material.diffuse.xyz * max(cosTheta,0.0); 
vec3 specular = 
light.specular.xyz * material.specular.xyz * pow(max(cosPhi,0.0), material.shininess*3.0) ; 
// 最 后 乘 以 3 .0 作为 改善 镜面 高 光 的 微调 


fragColor = vec4((ambient + diffuse + specular), 1.0); 


图 7.16《〈 见 彩 插 ) 所 示 的 两 个 例子 展示 了 Phong 着 色 应 用 在 比较 复杂 的 外 部 软件 生成 模 





图 7.16 Phong 着 色 的 外 部 模型 


124 第 7 章 光照 





图 7.16 Phong 着 色 的 外 部 模型 〈 续 ) 


型 上 所 产生 的 效果 。 图 7.16 上 图 展示 了 Jay Turberville 在 Studio 522 Productions tl 创建 的 
OBJ 格 式 海豚 模型 的 泻 染 图 。 图 7.16 下 图 是 著名 的 “斯 坦 福 龙 ”的 泻 染 ， 斯 坦 福 龙 是 1996 
年 对 一 个 小 模型 进行 3D 扫描 所 得 到 的 模型 8S7?9。 两 个 模型 都 使 用 我 们 放 在 “Utils.cpp” 文 
件 中 的 “黄金 ”材质 进行 演 染 。 斯 坦 福 龙 因 其 大 小 而 被 广泛 用 于 测试 图 形 算法 和 硬件 一 一 它 
包含 超过 800 000 个 三 角形 。 


7.6 ”结合 光照 与 纹理 


目前 为 止 ， 在 光照 模型 中 ， 都 是 假设 我 们 使 用 按 ADS 定义 的 光源 ， 照 亮 按 ADS 定义 材 
质 的 物体 。 但 是 ， 正 如 我 们 在 第 5 章 中 所 讲 的 ， 某 些 对 象 的 表面 可 能 会 指定 纹理 图 像 。 因 
此 ， 我 们 需要 一 种 方法 来 结合 采样 纹理 所 得 的 颜色 和 光照 模型 产生 的 颜色 。 

我 们 结合 光照 和 纹理 的 方式 取决 于 物体 的 特性 以 及 其 纹理 的 目的 。 这 里 有 多 种 情况 ， 其 
中 常见 的 有 : 

@ 纹理 图 像 很 写实 地 反映 了 物体 真实 的 表面 外 观 ; 

@ 物体 同时 具有 材质 和 纹理 ; 

@ 材质 包括 了 阴影 和 反射 信息 《在 第 8 章 、 第 9 间 中 ); 

@ 有 多 种 光 和 /或 多 个 纹理 。 

我 们 先 来 观察 第 一 种 情景 ， 物 体 拥有 一 个 简单 的 纹理 ， 同 时 我 们 对 它 进行 光照 。 实 现 这 
种 光照 的 一 种 简单 方法 是 在 片段 着 色 器 中 完全 将 材质 特性 去 除 掉 ， 之 后 使 用 纹理 取样 所 得 
纹理 颜色 代替 材质 的 ADS 值 。 下 面 的 伪 代 码 展示 了 这 种 策略 : 

fragColor = textureColor * ( ambientLight + diffuseLight ) + specularLight 

这 种 策略 下 ， 纹 理 颜色 影响 了 环境 光 和 漫 反 射 分 量 ， 而 镜面 反射 颜色 仅 由 光源 决定 。 镜 
面 反 射 分 量 仅 由 光源 决定 是 二 种 很 常见 的 做 法 ， 尤 其 是 对 于 金属 或 “内 亮 ” 的 表面 。 但 是 ， 
对 于 不 那么 内 亮 的 表面 ， 如 织物 或 未 上 漆 的 木材 〈 甚 至 一 小 部 分 金属 ， 如 黄金 )， 其 镜面 高 
光 部 分 都 应 当 包 含 物体 表明 颜色 。 在 这 些 情况 下 ， 之 前 的 策略 应 该 做 适当 微调 : 


fragColor = textureColor * ( ambientLight + diffuseLight + specularLight ) 








b 
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同时 也 有 一 些 情况 下 ， 物 体 本 身 具 有 ADS 材质 ， 并 伴 有 纹理 图 像 。 如 银 质 物体 使 用 纹 
理 为 表面 添加 一 些 氧化 痕迹 。 在 这 些 情况 下 ， 如 之 前 章节 中 所 讲 过 的 ， 既 用 到 光照 又 用 到 
材质 的 标准 ADS 模型 就 可 以 与 纹理 颜色 相 结合 ， 并 加 权 求 和 。 如 ; 


textureColor = texture(sampler, texCoord) 
lightColor = (ambLight * ambMaterial) + (diffLight * diffMaterial) + specLight 
fragColor = 0.5 * textureColor + 0.5 * lightColor 


这 种 策略 结合 了 光照 、 材 质 、 纹 理 ， 并 能 够 扩展 到 多 个 光源 以 及 多 种 材质 的 情况 。 如 : 


texturelColor = texture(samplerl, texCoord) 
texture2Color = texture(sampler2, texCoord) 


light1Color (ambLight1 * ambMaterial) 


= (diffLight1 * diffMaterial) + specLight1 
light2Color = (ambLight2 * ambMaterial) 


+ 
+ (diffLight2 * diffMaterial) + specLight2 


fragColor = 0.25 * texturelColor 
+ 0.25 * texture2Color 
+ 0.25 * light1Color 
+ 0.25 * light2Color 


图 7.17( 见 彩 插 ) 展示 了 拥有 UV 映射 纹理 图 像 (来 自 Jay Turberville!™'®!) 的 Studio 522 
海豚 ， 以 及 我 们 之 前 在 第 6 章 见 过 的 NASA 航天 飞机 模型 。 这 两 个 有 纹理 的 模型 都 使 用 了 
增强 后 的 Blinn-Phong 光照 ， 没 有 使 用 材质 ， 并 在 镜面 高 光 中 仅 使 用 光照 进行 计算 。 在 这 两 
幅 图 中 ， 片 段 着 色 器 中 颜色 相关 的 计算 为 : 


vec4 texColor = texture(sampler, texCoord) ; 
fragColor = texColor * (globalAmbient + lightAmb + lightDiff * max(dot(L,N),0.0)) 
+ lightSpec * pow(max(dot(H,N),0.0), matShininess*3.0); 


注意 ， 计 算 过 程 中 fragColor 可 能 产生 大 于 1.0 的 值 。 在 这 种 情况 下 ，OpenGL 会 将 它 限 
制 回 1.0。 





图 7.17 结合 光照 与 纹理 
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补充 说 明 


图 7.7 所 展示 的 面 片 着 色 的 环 面 是 通过 在 顶点 着 色 器 和 片段 着 色 器 中 ， 将 “flat” 插 值 限 
定 符 添加 到 相应 的 法 向 量 属性 声明 中 得 到 的 。 这 样 会 使 得 光栅 器 不 对 所 限定 的 变量 进行 插 
值 ， 而 是 直接 将 相同 的 值 赋 给 每 个 片段 (在 默认 情况 下 ， 它 会 选择 三 角形 第 一 个 顶点 上 的 
值 )。 在 Phong 着 色 示 例 代码 中 ， 可 以 通过 如 下 修改 实现 面 片 着 色 : 

在 顶点 着 色 器 中 

flat out vec3 varyingNormal; 

在 片段 着 色 器 中 

flat in vec3 varyingNormal; 

我 们 还 没有 讨论 的 一 类 很 重要 的 光 是 分 布 式 光 (distributed light) ER B 3% 3 (area light)), 
这 种 光 的 光源 是 一 片区 域 而 非 一 个 单 点 。 它 在 现实 世界 相对 应 的 例子 是 通常 在 办 公 室 或 教 
室 中 的 日 光 灯 管 。 有 兴趣 的 读者 可 以 在 WJ 找到 更 多 有 关 区 域 光 的 详细 信息 。 


历史 记录 


在 本 章 中 我 们 过 度 简 化 了 Gouraud 和 Phong 的 一 些 术语 。Gouraud 着 色 归 功 于 Gouraud 一 一 
通过 计算 顶点 上 光 的 强度 并 使 用 光栅 器 对 光 强 进行 插值 以 生成 平滑 的 曲面 外 观 〈 有 时 也 被 
BA PRAE”). Phong 着 色 则 归功 于 Phong， 这 是 另 一 种 平滑 着 色 ， 对 法 向 量 插值 并 计 
算 每 个 像素 的 光照 。Phong 同时 也 被 认为 是 成 功 将 镜面 高 光 纳 入 平滑 着 色 的 先驱 者 。 因 此 ， 
ADS 光照 模型 在 计算 机 图 形 学 中 也 通常 被 称 为 Phong 反射 模型 。 因 此 ， 我 们 例子 中 的 
Gouraud 着 色 准 确 地 来 说 是 使 用 了 Phong 反射 模型 的 Gouraud 着 色 。 由 于 Phong 的 反射 模型 
在 3D 图 形 编程 中 非常 普及 , 通常 Gouraud 着 色 模 型 都 是 在 Phong 反射 模型 中 进行 展示 。 不 
过 这 可 能 会 引起 误会 ， 因 为 原本 Gouraud 在 1971 年 的 工作 中 并 没有 任何 镜面 反射 分 量 。 





=) zi 


Ad 


7.1 CRA) 修改 程序 7.1 以 使 光 能 随 鼠 标 而 移动 。 在 实现 这 个 功能 之 后 ， 四 处 移动 鼠 
标 ， 并 记录 下 镜面 高 光 的 移动 以 及 Gouraud 着 色 伪 影 的 出 现 。 你 可 能 会 需要 在 光源 处 泻 染 
一 个 点 (或 者 小 物体 ) 以 便 完 成 该 项 目 。 

7.2 在 程序 7.2 中 重复 练习 7.1 的 内 容 。 这 里 应 该 只 需要 将 Phong 着 色 的 着 色 器 放 入 练 
习 7.1 的 解决 方案 中 。 从 Gouraud 着 色 到 Phong 着 色 的 进步 在 光 四 处 移动 时 应 当 更 明显 。 

7.3 CRE) 修改 程序 7.2 以 使 其 包括 两 个 位 于 不 同位 置 的 位 置 光 。 片 段 着 色 器 需要 混 
合 每 个 光 的 漫 反射 和 镜面 反射 分 量 。 尝 试 使 用 与 7.6 节 所 示 相 似 的 加 权 求 和 方法 。 你 可 以 尝 
试 简单 地 将 它们 加 起 来 并 限制 结果 不 超出 光照 值 的 上 限 。 

7.4 《研究 和 项 目 ) 将 程序 7.2 中 的 位 置 光 替换 为 7.2 节 中 所 描述 的 探照灯 。 尝 试 设置 
不 同 的 遮光 角 、 衰 减 指数 并 观察 其 效果 。 
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第 8 章 阴影 


8.1 阴影 的 重要 性 


在 第 7 章 中 ， 我 们 学 会 了 如 何 为 3D 场景 添加 光照 。 但 是 ， 我 们 并 没有 真 的 添加 光线 ， 
而 是 模拟 光照 在 物体 上 的 效果 一 一 使 用 ADS 模型 一 并 相应 地 调整 这 些 物体 的 绘制 方式 。 

当 我 们 用 这 种 方法 照 亮 同一 个 
场景 中 的 多 个 物体 时 ， 它 的 局 限 性 
就 体现 出 来 了 。 考 虑 图 8.1 所 示 的 
场景 ， 其 中 包含 了 砖 块 纹理 环 面 以 
及 地 平面 (地 平面 是 一 个 巨大 立方 
体 的 顶部 ,使 用 了 来 自 &ulg 的 草地 
纹理 )。 

一 眼 望 去 我 们 的 场景 好 像 没 问 
题 。 但 是 ， 仔 细 观 察 会 发 现 有 什么 
重要 的 东西 没有 出 现 。 具 体 来 说 ， inact 
就 是 我 们 没有 办 法 分 辨 出 环 面 距离 国生 二 
它 下 方 纹理 立方 体 的 距离 。 环 面 究竟 是 浮 在 立方 体 上 面 呢 ， 还 是 放置 在 立方 体 顶 部 呢 ? 

我 们 无 法 回答 这 个 问题 的 原因 正 是 因为 场景 中 缺乏 阴影 。 我 们 期 望 看 到 阴影 ， 因 为 大 及 
需要 通过 阴影 ， 才 能 针对 我 们 所 看 到 的 物体 以 及 他 们 的 位 置 关系 构建 完整 的 心理 模型 。 

考虑 图 8.2 所 示 的 同样 的 场景 ， 不 过 添加 了 阴影 。 现 在 就 很 明显 了 ， 左 图 中 环 面 放 在 地 
平面 上 ， 而 右 图 中 ， 环 面 则 浮 于 其 上 。 














图 8.2 ” 带 阴 影 的 光照 
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8.2 ”投影 阴影 


为 了 给 3D 场景 添加 阴影 , 人 们 设计 了 许多 有 趣 的 方法 。 其 中 一 种 很 适合 在 地 平面 上 (如 
图 8.1 所 示 ) 绘制 阴影 ， 又 相对 不 需要 太 大 计算 代价 的 方法 ， 叫 作 投影 阴影 (projective 
shadows)。 给 定 一 个 位 于 〈 疙 , 歼 , 盖 ) 的 点 光源 、 一 个 需要 泻 染 的 物体 以 及 一 个 投射 阴影 的 
平面 ,可 以 通过 生成 一 个 变换 和 矩阵， 将 物体 上 的 点 (Xp,Yw,Zw) 变换 为 相应 阴影 在 平面 上 的 
点 (Xs,0,Zs)。 之 后 将 其 生成 的 “阴影 多 边 形 ” 绘 制 出 来 ， 通 常 使 用 上 暗色 物体 与 地 平面 纹理 
混合 作为 其 纹理 ， 如 图 8.3 所 示 。 


光 XVZ) 






影 多 边 形 


图 8.3 投影 阴影 





使 用 投影 阴影 进行 投射 的 优点 是 它 的 高 效 和 易于 实现 。 但 是 ， 它 仅 适 用 于 平坦 表面 
这 种 方法 无 法 投射 阴影 于 曲面 或 其 他 物体 。 即 使 如 此 ， 它 仍然 适用 于 有 室外 场景 并 对 性 能 
要 求 较 高 的 应 用 ， 很 多 游戏 中 的 场景 都 属于 这 类 。 

投影 阴影 变换 矩阵 的 发 展 在 加 [As 以 及 5 9 中 有 讨论 。 


8.3 ”阴影 体 


Franklin C. Crow 在 1977 年 提出 了 另 一 个 重要 的 方法 ， 这 个 方法 先 找到 被 物体 阴影 覆盖 
的 阴影 体 ， 之 后 减少 视 体 与 阴影 体 相 交 部 分 中 的 多 边 形 的 颜色 强度 。 图 8.4 展示 了 阴影 体 中 
的 立方 体 ， 因 此 ， 立 方 体 绘制 时 会 更 暗 。 

阴影 体 的 优点 在 于 其 高 度 准 确 ， 比 起 其 他 方法 来 更 不 容易 产生 伪 影 。 但 是 ， 计 算出 阴影 
体 以 及 每 个 多 边 形 是 否 在 其 中 这 件 事 ， 即 使 对 于 现代 GPU 来 说 ， 计 算 代 价 也 很 大 。 几 何 着 
色 器 可 以 用 于 计算 阴影 体 ， 模 板 缓冲 区 ?可 以 用 于 判断 像素 是 否 在 阴影 体内 。 有 些 显卡 对 于 
特定 的 阴影 体操 作 优化 提供 了 硬件 支持 。 


@ 模板 缓冲 区 是 通过 OpenGL 访问 的 第 三 个 缓冲 区 一 一 在 颜色 缓冲 区 和 缓冲 区 之 后 。 本 书 中 不 对 模板 缓冲 区 进行 讲解 。 
一 一 译 者 注 
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一 


产生 阴影 的 物体 





图 8.4 阴影 体 


8.4 ”阴影 贴图 


阴影 贴图 是 用 于 投射 阴影 最 实用 也 最 流行 的 方法 之 一 。 昌 然 它 并 不 总 是 像 阴影 体 一 样 准 
确 〈 且 通常 伴随 着 讨厌 的 伪 影 )， 但 阴影 贴图 实现 起 来 更 简单 ， 可 以 在 各 种 情况 下 使 用 ， 并 
享有 强大 的 硬件 支持 。 
如 果 我 们 不 在 这 里 澄清 前 一 段 中 的 “更 简单 ”这 个 词 ， 那 将 是 我 们 的 玻 忽 。 虽 然 阴 影 贴 
图 比 阴影 体 〈 在 概念 和 实践 中 ) 更 简单 ， 但 它 绝 不 “简单 ” 对 学 生来 说 ， 通 常 在 3D 图 形 
课程 中 最 难 实现 的 技术 之 一 就 是 阴影 贴图 。 着 色 器 程序 本 质 上 很 难 调 试 ， 阴 影 贴图 需要 几 
个 组 件 和 着 色 器 模块 的 完美 协调 。 请 注意 ， 通 过 使 用 前 面 2.2 节 中 描述 的 调试 工具 ， 可 以 极 
大 地 促进 阴影 贴图 的 成 功 实现 。 
阴影 贴图 基于 一 个 非常 简明 的 想法 : 光线 无 法 看 到 的 任何 东西 都 在 阴影 中 。 也 就 是 说 ， 
如 果 对 象 #1 阻挡 光 到 达 对 象 #2， 等 同 于 光 不 能 “看 到 ”对 象 #2。 
这 个 想法 的 强大 之 处 在 于 我 们 已 经 有 了 方法 来 确定 物体 是 否 可 以 被 “看 到 ”一 一 使 用 Z 
缓冲 区 的 隐藏 面 消除 算法 (HSR)， 如 2.1.7 节 所 述 。 因 此 ， 计 算 阴 影 的 策略 是 ， 暂 时 将 摄像 
机 移动 到 光 的 位 置 ， 应 用 乙 缓冲 区 HSR 算法 ， 然 后 使 用 生成 的 深度 信息 来 计算 阴影 。 
因此 ， 演 染 场景 需要 两 轮 : 第 1 轮 从 灯光 的 角度 泻 染 场景 《但 实际 上 没有 将 其 绘制 到 屏 
幕 上 )， 第 2 轮 从 摄像 机 的 角度 泻 染 场景 。 第 1 轮 的 目的 是 从 光 的 角度 生成 Z 缓冲 区 。 完 成 
第 1 轮 之 后 ， 我 们 需要 保留 Z 缓冲 区 并 使 用 它 来 帮助 我 们 在 第 2 轮 生成 阴影 。 第 2 轮 实际 
绘制 场景 。 
我 们 的 策略 可 以 更 加 精炼 。 
@ (第 1 轮 ) 从 灯光 的 位 置 泻 染 场景 。 然 后 ， 对 于 每 个 像素 ， 深 度 缓冲 区 包含 光 与 最 
近 的 对 象 之 间 的 距离 。 

@ 将 深度 缓冲 区 复制 到 单独 的 “阴影 缓冲 区 ”。 

@ (第 2 轮 ) 正常 泻 染 场景 。 对 于 每 个 像素 ， 在 阴影 缓冲 区 中 查找 相应 的 位 置 。 如 果 
相机 到 泻 染 点 的 距离 大 于 从 阴影 缓冲 区 检索 到 的 值 , 则 在 该 像素 处 绘制 的 对 象 离 光 
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线 的 距离 ， 比 离 光 线 最 近 的 对 象 更 远 ， 因 此 该 像素 处 于 阴影 中 。 

当 发 现 像素 处 于 阴影 中 时 ， 我 们 需要 使 其 更 暗 。 一 种 简单 而 有 效 的 方法 是 仅 泻 染 其 环境 
光 ， 忽 略 其 漫 反 射 和 镜面 反射 分 量 。 

上 述 方法 通常 被 称 为 “阴影 缓冲 区 ”。 而 当 我 们 在 第 二 步 中 ， 将 深度 缓冲 区 复制 到 纹理 
中 ， 则 称 为 “阴影 贴图 ”。 当 纹理 对 象 用 于 储存 阴影 深度 信息 时 ， 我 们 称 其 为 阴影 纹理 ， 
OpenGL 通过 sampler2DShadow 类 型 支持 阴影 纹理 〈 稍 后 讨论 )。 这 样 ， 我 们 就 可 以 利用 片 
段 着 色 器 中 纹理 单元 和 采样 器 变量 〈 即 “纹理 贴图 ”) 的 硬件 支持 功能 ， 在 第 2 轮 快 速 执行 
深度 查找 。 我 们 现在 修改 的 策略 是 : 

@ (第 1 轮 ) 与 之 前 相同 ; 

@ 将 深度 缓冲 区 的 内 容 复制 进 纹理 对 象 

@ (B24) 与 之 前 相同 ， 不 过 阴影 缓冲 区 变 为 阴影 纹理 。 

现在 我 们 来 实现 这 些 步骤 。 


8.4.1 阴影 贴图 ( 第 1 轮 ) 一 一 从 光源 位 置 “ 绘 制 ”物体 


在 第 一 步 中 ,我们 首先 将 相机 移动 到 灯光 的 位 置 然 后 渲染 场景 。 我 们 的 目标 不 是 在 显示 
器 上 实际 绘制 场景 ， 而 是 完成 足够 的 泻 染 过 程 以 正确 填充 深度 缓冲 区 。 因 此 ， 没 有 必要 为 
像素 生成 颜色 ， 我 们 的 第 一 遍 将 仅 使 用 顶点 着 色 器 ， 但 片段 着 色 器 不 执行 任何 操作 。 
当然 ， 移 动 相机 需要 构建 适当 的 观察 矩阵 。 根 据 场景 的 内 容 ， 我 们 需要 在 光源 处 依 合适 
的 方向 来 看 场景 。 通 常 ， 我 们 希望 此 方向 朝向 最 终 在 第 2 轮 中 呈现 的 区 域 。 
这 个 方向 通常 依 场景 而 定 一 一 在 我 们 的 场景 中 ， 我 们 通常 会 将 相机 从 光源 指向 原点 。 
第 1 轮 中 有 几 个 需要 处 理 的 重要 细节 。 
@ 配置 缓冲 区 和 阴影 纹理 。 
o 禁用 颜色 输出 。 
@ ”从 光源 到 视野 中 的 物体 构建 一 个 LookAt 矩阵 。 
@ 启用 GLSL 第 1 轮 着 色 器 程序 ， 该 程序 仅 包 含 图 8.5 中 的 简单 顶点 着 色 器 ， 准 备 接 
收 MVP 和 矩阵。 在 这 种 情况 下 ,MVP 和 矩阵 将 包括 对 象 的 模型 矩阵 MM、 前 一 步 中 计算 
的 LookAt 矩阵 (作为 观察 矩阵 所， 以 及 透视 矩阵 P。 我 们 将 该 MVP 矩阵 称 为 
“shadowMVP”, 因为 它 是 基于 光 而 不 是 相机 的 观察 点 。 由 于 实际 上 没有 显示 来 自 光 
源 的 视图 ， 因 此 第 1 轮 着 色 器 程序 的 片段 着 色 器 不 会 执行 任何 操作 。 


#version 430 /顶点 着 色 器 
layout (location=0) in vec3 vertPos; 
uniform mat4 shadowMVP; 


void main(void) 


{ gl Position = shadowMVP * vec4(vertPos, 1.0); 
} 


#version 430 /片段 着 色 器 
void main(void) {} 





图 8.5 阴影 贴图 第 1 轮 的 顶点 着 色 器 和 片段 着 色 器 
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@ 为 每 个 对 象 创 建 shadowMVP FERE, HWA glDrawArrays(). $ 1 轮 中 不 需要 包含 
纹理 或 光照 ， 因 为 对 象 不 会 泻 染 到 屏幕 上 。 


8.4.2 ”阴影 贴图 ( 中 间 步 骤 ) 一 一 将 Z 缓冲 区 复制 到 纹理 


OpenGL 提供 了 两 种 将 Z 缓冲 区 深度 数据 放 入 纹理 单元 的 方法 。 第 一 种 方法 是 生成 空 阴 
影 纹 理 ， 然 后 使 用 命令 glCopyTexImage2D() 将 活动 深度 缓冲 区 复制 到 阴影 纹理 中 。 

第 二 种 方法 是 在 第 1 轮 中 构建 一 个 “ 自 定义 帧 缓冲 区 ”( 而 不 是 使 用 默认 的 Z 缓冲 区 )， 
并 使 用 命令 glFrameBufferTexture() 将 阴影 纹理 附加 到 它 上 面 。OpenGL 在 3.0 版 中 引入 该 命 
令 ， 以 进一步 支持 阴影 纹理 。 使 用 这 种 方法 时 ， 无 须 将 Z 缓冲 区 “复制 ”到 纹理 中 ， 因 为 
缓冲 区 已 经 附加 了 纹理 ， 深 度 信 息 由 OpenGL 自动 放 入 纹理 中 。 我 们 将 在 实现 中 使 用 这 种 
方法 。 


8.4.3 阴影 贴图 (第 2 轮 ) 泻 染 带 阴影 的 场景 


第 2 轮 中 的 大 部 分 内 容 与 我 们 在 第 7 章 中 看 到 的 类 似 , 即 我 们 在 这 里 泻 染 完整 的 场景 及 
其 中 的 所 有 物体 ， 以 及 光照 、 材 质 和 装饰 场景 中 物体 的 纹理 。 同 时 ， 我 们 还 需要 添加 必要 
的 代码 ， 以 确定 每 个 像素 是 否 在 阴影 中 。 

第 2 轮 的 一 个 重要 特征 是 它 使 用 了 两 个 MVP 和 矩阵。 一 个 是 将 对 象 坐 标 转换 为 屏幕 坐标 
的 标准 MVP 和 矩阵 (如 我 们 之 前 的 大 多 数 示 例 所 示 )。 另 一 个 是 在 第 1 轮 中 生成 的 shadowMVP 
和 矩阵， 用 于 从 光源 的 角度 进行 泻 染 一 一 现在 将 在 第 2 轮 中 用 于 从 阴影 纹理 中 查找 深度 信息 。 

在 第 2 轮 中 ， 从 纹理 贴图 尝试 查找 像素 时 ， 情 况 比较 复杂 。OpenGL 相机 使 用 [-1...+1] 
坐标 空间 ， 而 纹理 贴图 使 用 [0...1] 空 间 。 常 见 的 解决 方案 是 构建 一 个 额外 的 矩阵 变换 ， 通 常 
BRA B， 它 将 用 于 从 摄像 机 空间 到 纹理 空间 的 转换 (或 “偏离 ”biases， 因 此 名 称 )。 得 到 
B 的 过 程 很 简单 一 一 先 缩放 为 /2， 再 平移 1/2。 

ERE B 如 下 : 
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之 后 将 B 合 并 入 shadowMVP 矩阵 以 备 在 第 2 轮 中 使 用 ， 如 下 : 
shadowMVP2 =[B][shadowM VP. 


(pass!) J 

假设 我 们 使 用 阴影 纹理 附加 到 我 们 的 自 定义 帧 缓冲 区 的 方法 ，OpenGL 提供 了 一 些 相对 
简单 的 工具 ， 用 于 确定 绘制 对 象 时 ， 像 素 是 否 处 于 阴影 中 。 以 下 是 第 二 阶段 处 理 的 详细 信 
息 摘 要 。 

o 构建 变换 矩阵 B， 用 于 从 光照 空间 转换 到 纹理 空间 [更 合适 在 init() 中 进行 ]。 

@ ”启用 阴影 纹理 以 进行 查找 。 

o ”启用 颜色 输出 。 

@ H GLSL 第 2 轮 泻 染 程序 ， 包 含 顶点 着 色 器 和 片段 着 色 器 。 


B= 








SS 
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根据 摄像 机 位 置 〈 正 常 ) 为 正在 绘制 的 对 象 构 建 MVP 和 矩阵。 

构建 shadowMVP2 WERE (Le B 矩阵 ， 如 前 所 述 ) 一 一 着 色 器 将 需要 用 它 查 找 阴 
影 纹 理 中 的 像素 坐标 。 

将 生成 的 矩阵 变换 发 送 到 着 色 器 统一 变量 。 

像 往常 一 样 启用 包含 顶点 、 法 向 量 和 纹理 坐标 〈 如 果 使 用 ) 的 缓冲 区 。 

调用 glDrawArrays(). 


除了 泻 染 任务 外 ， 项 点 和 片段 着 色 器 还 需要 额外 承担 一 些 任务 。 


顶点 着 色 器 将 顶点 位 置 从 相机 空间 转换 为 光照 空间 , 并 将 结果 坐标 发 送 到 顶点 属性 
中 的 片段 着 色 器 ， 以 便 对 它们 进行 插值 。 这 样片 段 着 色 器 可 以 从 阴影 纹理 中 检索 正 
确 的 值 。 

片段 着 色 器 调用 textureProj() 函 数 ,该 函数 返回 0 或 1, 指示 像素 是 否 处 于 阴影 中 (所 
涉及 的 机 制 将 在 后 面 解释 )。 如 果 它 在 阴影 中 ， 则 着 色 器 通过 剔除 其 漫 反 射 和 镜面 
反射 分 量 来 输出 更 暗 的 像素 。 


阴影 贴图 是 一 种 常见 任务 ， 因 此 GLSL 为 其 提供 了 一 种 特殊 类 型 的 采样 器 变量 ， 称 为 
sampler2DShadow 〈 如 前 所 述 )， 可 以 附加 到 C++/ OpenGL 应 用 程序 中 的 阴影 纹理 。 
textureProj() 函 数 用 于 从 阴影 纹理 中 查找 值 ， 它 类 似 于 我 们 之 前 在 第 5 章 中 看 到 的 texture(), 
其 区 别 是 除了 textureProj() 函 数 使 用 vec3 来 索引 纹理 而 不 是 通常 的 vec2。 由 于 像素 坐标 是 
vec4， 因 此 需要 将 其 投影 到 2D 纹理 空间 上 ， 以 便 在 阴影 纹理 贴图 中 查找 深度 值 。 正 如 我 们 
将 在 下 面 看 到 的 ，textureProj() 为 完成 了 这 些 功 能 

顶点 着 色 器 和 片段 着 色 器 代码 的 其 余部 分 实现 了 Blinn-Phong 着 色 。 这 些 着 色 器 如 图 8.6 
和 图 8.7 所 示 ， 并 增加 了 阴影 贴图 的 代码 。 


#version 430 
layout (location=0) in vec3 vertPos; 
layout (location=1) in vec3 vertNormal; 


out vec3 varyingNormal, varyingLightDir, varyingVertPos, varyingHalfVec; 
out vec4 shadow_coord; 


struct PositionalLight { vec4 ambient, diffuse, specular; vec3 position; }; 

struct Material { vec4 pon diffuse, specular; float shininess; }; 

uniform vec4 globalAmbient 

uniform PositionalLight light: 7 假设 光源 位 置 以 视觉 空间 坐标 表示 

uniform Material material; 

uniform mat4 mv_matrix; 

uniform mat4 proj_matrix; 

uniform mat4 norm_matrix; 

uniform mat4 shadowMVP2; 

layout (binding=0) uniform sampler2DShadow shTex; 

void main(void) 

{  varyingVertPos = (mv_matrix * vec4(vertPos,1.0)).xyz; 
varyingLightDir = light.position - varyingVertPos; 
varyingNormal = (norm_matrix * vec4(vertNormal,1.0)).xyz; 
varyingHalfVec = (varyingLightDir - varyingVertP os).xyz; 
shadow_coord = shadowMVP2 * vec4(vertPos,1.0); 
gl_Position = proj_matrix * mv_matrix * vec4(vertPos,1.0); 





图 8.6 阴影 贴图 第 2 轮 顶点 着 色 器 


让 我 们 更 仔细 地 研究 一 下 如 何 使 用 OpenGL 来 执行 正在 泻 染 的 像素 和 阴影 纹理 中 的 值 之 
间 的 深度 比较 。 首 先 ， 从 顶点 着 色 器 开始 ， 在 模型 空间 中 使 用 顶点 坐标 ， 我 们 将 其 与 
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shadowMVP2 相 乘 以 生成 阴影 纹理 坐标 ， 这 些 坐 标 对 应 于 投影 到 光照 空间 中 的 顶点 坐标 ， 是 

之 前 从 光源 的 视角 生成 的 。 经 过 插值 后 的 (3D) 光照 空间 坐标 x,y,z) 在 片段 着 色 器 中 使 用 

如 下 。z 分 量 表示 从 光 到 像素 的 距离 。(x,y) 分 量 用 于 检索 存储 在 (2D) 阴影 纹理 中 的 深度 信 

息 。 将 该 检索 的 值 〈 到 最 靠近 光 的 物体 的 距离 ) 与 z 进行 比较 。 该 比较 产生 “二 元 ”结果 ， 

告诉 我 们 我 们 正在 泻 染 的 像素 是 否 比 最 接近 光 的 物体 离 光 更 远 ( 即 像素 是 否 处 于 阴影 中 )。 
假设 光源 位 置 以 视觉 空间 坐标 表示 。 

与 顶点 着 色 器 相同 的 结构 体 和 统一 变量 。 

如 果 我 们 在 OpenGL 中 使 用 前 面 介绍 过 的 glFrameBufferTexture() 并 启用 深度 测试 ， 然 后 
使 用 片段 着 色 器 OLE 8.7) 的 sampler2DShadow 和 textureProj()， 所 演 染 的 结果 将 完全 满足 
我 们 的 需求 。 即 textureProj() 将 输出 0.0 或 1.0， 具 体 取 决 于 深度 比较 。 基 于 此 值 ， 当 像素 离 
光源 比 离 光源 最 近 的 物体 更 远 时 ， 我 们 可 以 在 片段 着 色 器 中 忽略 漫 反 射 和 镜面 反射 分 量 ， 
从 而 有 效 地 创建 阴影 。 概 述 如 图 8.8 所 示 。 


#version 430 
in vec3 rE ately _varyingLightDir, varyingVertPos, varyingHalfVec; 


in vec4 shadow_coord 


out vec4 fragColor; | 


W 与 顶点 着 色 器 相同 的 结构 体 和 统一 变量 


void main(void) 

{ vec3L = normalize(varyingLightDir); 
vec3 N = normalize(varyingNormal); 
vec3 V = normalize(-varyingVertPos); 
vec3 H = normalize(varyingHalfVec); 


float notInShadow = textureProj(shTex, shadow coord); 


fragColor = globalAmbient * material.ambient + light.ambient * material.ambient; 
an 


fra + light. diffuse * material.diffuse * max(dot(L,N),0.0) 
+ light. specular * material.specular 
* pow(max(dot(H,N),0.0),material.shininess*3.0); 


if z <= V return 1.0, else return 0.0 





图 8.8 自动 深度 比较 
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我 们 现在 准备 构建 C++ / OpenGL 应 用 程序 以 使 用 上 述 着 色 器 。 


8.5 BA RZ 2 M5 图 miy 


考虑 图 8.9 中 包含 环 面 和 金字 塔 的 场景 。 位 

de ee 

金字 塔 应 该 在 环 面 上 投下 阴影 

为 了 阐明 示例 的 开发 ， 我 们 的 第 一 步 是 将 
第 1 轮 泻 染 到 屏幕 以 确保 它 正 常 工作 。 为 此 ， 
我 们 将 临时 添加 一 个 简单 的 片段 着 色 器 〈 它 不 
会 包含 在 最 终 版 本 中 ) 并 在 第 1 轮 中 仅 输出 一 
种 固定 颜色 (如 红色 );， 例如: 








图 8.9 有 光照 无 阴影 的 场景 


#version 430 

out vec4 fragColor; 

void main(void) 

{ fragColor = vec4(1.0, 0.0, 0.0, 0.0); 

} 

让 我 们 假设 场景 的 原点 位 于 图 的 中 心 在 金字 塔 和 环 面 之 间 。 在 第 1 轮 中 ， 我 们 将 相机 放 
在 光源 的 位 置 (图 8.10 中 的 左 图 ) 并 指向 (0,0,0)。 然 后 我 们 用 红色 绘制 对 象 ， 它 会 产生 如 
图 8.10( 见 彩 插 ) 右 图 所 示 的 输出 。 注 意 金 字 塔 顶部 附近 的 环 面 一 一 这 个 制高点 附近 的 环 面 
部 分 位 于 金字 塔 后 面 。 





图 8.10 第 1 轮 : 场景 ( 左 ) 和 从 光源 视角 泻 染 的 场景 ( 右 ) 


包含 光照 与 阴影 贴图 的 完整 第 2 轮 C+HOpenGL 代码 见 程 序 8.1。 


程序 8.1 阴影 贴图 





// 大 部 分 与 之 前 相同 。 高 亮 部 分 代码 是 新 加 入 的 ， 用 以 实现 阴影 
// 实现 光照 所 需 的 大 部 分 引用 需要 在 代码 开始 引入 ， 与 之 前 相同 
// 因此 不 在 这 里 重复 


// 在 这 里 定义 渲染 程序 所 用 的 变量 、 缓 冲 区 、 着 色 器 源 代码 等 
hipextedMedel pyramid ("pyr.obj"); // 定义 金字 塔 


Torus myTorus(0.6f, 0.4f, 48); // 定义 环 面 


int numPyramidVertices, numTorusVertices, numTorusIndices; 
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// 环 面 、 金 字 塔 、 相 机 和 光源 的 位 置 

glm: :vec3 torusLoc(1.6f, 0.0f, -0.3f); 
glm::vec3 pyrLoc(-1.0f, 0.1f, 0.3f); 
glm: :vec3 cameraLoc(0.0f, 0.2f, 6.0f); 
glm::vec3 lightLoc(-3.8f, 2.2f, 1.1f); 


// 场景 中 所 使 用 白光 的 属性 (全 局 光 和 位 置 光 ) 

float globalAmbient[4] = { 0.7f，0.7f，0.7f，1.0f }; 
float lightAmbient[4] = { 0.0f, 0.0f, 0.0f, 1.0f }; 
float lightDiffuse[4] = { 1.0f, 1.0f, 1.0f, 1.0f }; 
float lightSpecular[4] = { 1.0f, 1.0f, 1.0f, 1.0f }; 


// 金字 塔 的 黄金 材质 

float* goldMatAmb = Utils::goldAmbient (); 
float* goldMatDif = Utils::goldDiffuse(); 
float* goldMatSpe = Utils::goldSpecular(); 
float goldMatShi = Utils::goldShininess(); 


// 环 面 的 青铜 材质 

float* bronzeMatAmb = Utils::bronzeAmbient (); 
float* bronzeMatDif = Utils::;bronzeDiffuse(); 
float* bronzeMatSpe = Utils::bronzeSpecular()j; 
float bronzeMatShi = Utils::bronzeShininess(); 


// 在 display() 中 将 光照 传 入 着 色 器 的 变量 
float curAmb[4], curDif[4], curSpe[4], matAmb[4], matDif[4], matSpe[4]; 
float curShi, matShi; 


// 阴影 相关 变量 

int screenSizeX, screenSizeY; 
GLuint shadowTex, shadowBuffer; 
glm::mat4 lightVmatrix; 
glm::mat4 lightPmatrix; 
glm::mat4 shadowMVP1; 
glm::mat4 shadowMVP2; 
gim::mat4 b; 


// 这 里 定义 类 型 为 mat4 的 光源 观察 矩阵 与 相机 观察 矩阵 的 矩阵 变换 (mMat ，vMat $) 
// 其 他 在 display 中 所 使 用 的 变量 也 在 此 定义 


int main(void) { 
// 与 前 例 相 同 ， 无 改动 
} 


// init () 函数 依然 执行 调用 以 编译 着 色 器 并 初始 化 物体 
// 同时 它 也 调用 setupshadowBuffers () 函数 以 初始 化 阴影 贴图 相关 缓冲 区 
// 最 后 ， 它 构造 B 矩阵 以 进行 从 光照 空间 到 纹理 空间 的 转换 


void init(GLFWwindow* window) { 


renderingPrograml = Utils::createShaderProgram("./vert1lShader.glsl", "./fraglShader.glsl"); 
renderingProgram2 = Utils::createShaderProgram("./vert2Shader.glsl", "./frag2Shader.glsl"); 


setupVertices(); 
setupShadowBuffers () ; 


b = glm::mat4 ( 
0. SE Os 0E, 1 O20f, 40. 06, 
0.0f, 0.5f, 0.0f, 0.0f, 
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0.0f, 0.0f, 0.5f, 0.0f, 
0.5f, 0.5f, 0.5f, 1.0£); 


void setupShadowBuffers (GLFWwindow* window) { 
glfwGetFramebufferSize(window, &width, &height); 
screenSizeX = width; 
screenSizeY = height; 


// 创建 自 定义 帧 缓冲 区 
glGenFramebuffers(1, &shadowBuffer) ; 


// 创建 阴影 纹理 并 让 它 存储 深度 信息 
// 这 些 步 骤 与 程序 5. 2 中 相似 
glGenTextures(1, &shadowTex) ; 
glBindTexture(GL_TEXTURE 2D, shadowTex) ; 
glTexImage2D(GL_TEXTURE 2D, 0, GL DEPTH COMPONENT32, 

screenSizeX, screenSizeY, 0, GL DEPTH COMPONENT, GL FLOAT, 0); 
glTexParameteri(GL_ TEXTURE 2D, GL TEXTURE MIN FILTER, GL LINEAR); 
glTexParameteri(GL TEXTURE 2D, GL TEXTURE MAG FILTER, GL LINEAR); 
glTexParameteri (GL TEXTURE 2D, GL TEXTURE COMPARE MODE, GL COMPARE REF TO TEXTURE) ; 
glTexParameteri(GL TEXTURE 2D, GL TEXTURE COMPARE FUNC, GL_LEQUAL); 


void setupVertices(void) { 
// 与 之 前 的 例子 相同 。 这 个 函数 用 来 创建 VAO 和 VBO 
// 之 后 将 环 面 及 金字 塔 的 顶点 与 法 向 量 读 入 缓冲 区 

} 


// display() 函数 分 别管 理 第 1 轮 需要 使 用 的 自 定义 帧 缓冲 区 
// 以 及 第 2 轮 需 要 使 用 的 阴影 纹理 初始 化 过 程 。 阴 影 相关 新 功能 已 高 亮 


void display(GLFWwindow* window, double currentTime) { 
glClear (GL COLOR BUFFER BIT); 
glClear (GL DEPTH BUFFER BIT); 


// 从 光源 视角 初始 化 视觉 矩阵 以 及 透视 矩阵 ， 以 便 在 第 1 轮 中 使 用 
lightVmatrix = glm::lookAt(currentLightPos, origin, up); // 从 光源 到 原点 的 矩阵 
lightPmatrix = glm::perspective(toRadians(60.0f), aspect, 0.1f, 1000.0f); 


// 使 用 自 定义 帧 缓冲 区 ， 将 阴影 纹理 附着 到 其 上 
glBindFramebuffer(GL_FRAMEBUFFER, shadowBuffer) ; 
glFramebufferTexture (GL_FRAMEBUFFER, GL DEPTH ATTACHMENT, shadowTex, 0); 


// 关闭 绘制 颜色 ， 同 时 开启 深度 计算 
glDrawBuffer(GL_NONE) ; 
glEnable(GL_DEPTH_TEST) ; 


passOne(); 


// 使 用 显示 缓冲 区 ， 并 重新 开启 绘制 
glBindFramebuffer(GL_FRAMEBUFFER, 0); 

glActiveTexture (GL_TEXTUREO) ; 
glBindTexture (GL TEXTURE 2D, shadowTex) ; 

glDrawBuffer (GL_FRONT); // 重新 开启 绘制 颜色 


passTwo(); 
} 


// 接 下 来 是 第 1 轮 和 第 2 轮 的 代码 
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// 这 些 代码 和 之 前 的 大 体 相同 
// 与 阴影 相关 的 新 增 代码 已 高 亮 


void passOne(void) { 


// renderingProgram1 包含 了 第 1 轮 中 的 顶点 着 色 器 和 片段 着 色 器 


glUseProgram(renderingProgram1) ; 
/7 接 下 来 的 代码 段 通过 从 光源 角度 党 染 环 面 获得 深度 缓冲 区 


mMat = glm::translate(glm::mat4(1.0f)，torusLoc)， 
// 轻微 旋转 以 便 查看 
mMat = glm::rotate(mMat, toRadians(25.0f), glm::vec3(1.0f, 0.0f, 0.0f)); 


// 我 们 从 光源 角度 绘制 ， 因 此 使 用 光源 的 P、V 矩阵 

shadowMVP1 = lightPmatrix * lightVmatrix * mMat; 

sLoc = glGetUniformLocation(renderingPrograml, "shadowMVP") ; 
glUniformMatrix4fv(sLoc, 1, GL FALSE, glm::value_ptr(shadowMVP1) ) ; 


// 在 第 1 轮 中 我 们 只 需要 环 面 的 顶点 缓冲 区 ， 而 不 需要 它 的 纹理 或 法 向 量 
glBindBuffer (GL ARRAY BUFFER, vbo[0]); 
glVertexAttribPointer(0, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0); 


glClear (GL DEPTH BUFFER_BIT); 
glEnable (GL CULL FACE); 
glFrontFace (GL CCW); 
glEnable (GL DEPTH TEST); 
glDepthFunc (GL LEQUAL); 


glBindBuffer (GL ELEMENT ARRAY BUFFER, vbo[4]); // vbo[4] 包含 环 面 索 引 
glDrawElements(GL_TRIANGLES, numTorusIndices, GL UNSIGNED INT, 0); 


// 对 金字 塔 做 同样 的 处 理 (但 不 清除 GL_DEPTH_BUFFER_BIT) 
// 金字 塔 没 有 索引 ， 因 此 我 们 使 用 g1DrawRrrays () 而 非 glDrawElements () 


glDrawArrays(GL TRIANGLES, 0, numPyramidVertices) ; 


void passTwo(void) { 


glUseProgram(renderingProgram2) ; // 第 2 轮 顶点 着 色 器 和 片段 着 色 器 


// 绘制 环 面 ， 这 次 我 们 需要 加 入 光照 、 材 质 、 法 向 量 等 

// 同时 我 们 需要 为 相机 空间 以 及 光照 空间 都 提供 MVP 变换 

mvLoc = glGetUniformLocation(renderingProgram2, "mv matrix"); 
projLoc = glGetUniformLocation(renderingProgram2, "proj matrix"); 
nLoc = glGetUniformLocation(renderingProgram2, "norm matrix"); 
sLoc = glGetUniformLocation(renderingProgram2, "shadowMVP") ; 


// 环 面 是 黄 铜 材质 

curAmb[0] = bronzeMatAmb[0]; curamb [1] = bronzeMatAmb[1]; curAmb[2] = bronzeMatAmb[2]; 
curDif[0] = bronzeMatDif[0]; curDif[1] = bronzeMatDif[1]; curDif [2] bronzeMatDif [2]; 
curSpe[0] = bronzeMatSpe [0]; curSpe[1] = bronzeMatSpe[1]; curSpe[2] = bronzeMatSpe[2]; 
curShi = bronzeMatShi; 


vMat = glm::translate(glm::mat4(1.0f), glm::vec3(-cameraLoc.x, -cameraLoc.y, -cameraLoc.z)); 


currentLightPos = glm::vec3(lightLoc) ; 
installLights(renderingProgram2, vMat); 


We EEE 
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mMat = glm::translate(glm::mat4(1.0f£), torusLoc) ; 
// 轻微 旋转 以 便 查看 
mMat = glm::rotate(mMat, toRadians (25.0f), glm::vec3(1.0f, 0.0f, 0.0f)); 


// 构建 相机 视角 环 面 的 MV 矩阵 
mvMat = vMat * mMat; 
invTrMat = glm::transpose(glm:: inverse (mvMat)); 


// 构建 光源 视角 环 面 的 MV 矩阵 
shadowMVP2 = b * lightPmatrix * lightVmatrix * mMat; 


// 将 MV UR PROT 矩阵 传 入 相应 的 统一 变量 

glUniformMatrix4fv(mvLoc, 1, GL FALSE, glm::value_ptr(mvMat) ); 
glUniformMatrix4fv(projLoc, 1, GL FALSE, glm::value_ptr(pMat)); 
glUniformMatrix4fv(nLoc, 1, GL FALSE, glm::value_ptr(invTrMat) ); 
glUniformMatrix4fv(sLoc, 1, GL FALSE, glm::value_ ptr(shadowMVP2) ) ; 


// 初始 化 环 面 顶 点 和 法 向 量 缓冲 区 () 
glBindBuffer (GL ARRAY BUFFER, vbo[0]); // 环 面 顶点 
glVertexAttribPointer(0, 3, GL FLOAT, GL_FALSE, 0, 0); 
glEnableVertexAttribArray (0) ; 


glBindBuffer (GL ARRAY BUFFER, vbo[2]); // 环 面 法 向 量 
glVertexAttribPointer(1, 3, GL FLOAT, GL_FALSE, 0, 0); 
glEnableVertexAttribArray (1); 


glClear (GL DEPTH BUFFER BIT); 
glEnable (GL _ CULL FACE); 
glFrontFace (GL CCW); 
glEnable (GL DEPTH TEST); 
glDepthFunc (GL LEQUAL); 


glBindBuffer (GL ELEMENT ARRAY BUFFER, vbo[4]); // vbo[4] 包 含 环 面 索引 
glDrawElements (GL_TRIANGLES, numTorusIndices, GL UNSIGNED INT, 0); 


// 对 黄金 金字 塔 重复 同样 步 对 
} 
程序 8.1 展示 了 与 之 前 详 述 过 的 第 1 轮 、 第 2 轮 着 色 器 交互 部 分 的 C++ / OpenGL 应 用 
程序 。 之 前 已 经 展示 过 的 模块 ， 如 读 取 着 色 器 、 编 译 着 色 器 、 构 建 模型 及 相关 缓冲 区 、 在 
着 色 器 中 初始 化 位 置 光源 ADS 特性 以 及 进行 透视 矩阵 和 LookAt 矩阵 计算 等 ， 这 些 模块 同 
Z AUF. 
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虽然 我 们 已 经 实现 了 为 场景 添加 阴影 的 所 有 基本 要 求 ， 但 运行 程序 8.1 会 产生 错 杂 的 结 
果 ， 如 图 8.11 所 示 。 

好 消息 是 我 们 的 金字 塔 现在 在 环 面 上 投下 阴影 ! 坏 消 息 则 是 ， 这 种 成 功 伴随 着 严重 的 伪 
影 。 有 许多 波浪 线 履 盖 在 场景 中 的 表面 。 这 是 阴影 贴图 的 常见 副作用 ， 称 为 阴影 冲 郊 〈 也 
称 为 阴影 斑 块 ，shadow acne) 或 错误 的 自 阴 影 。 

阴影 痉 疮 是 由 深度 测试 期 间 的 舍 入 误差 引起 的 。 在 阴影 纹理 中 查找 深度 信息 时 计算 的 纹 
理 坐 标 通常 与 实际 坐标 不 完全 匹配 。 因 此 ， 从 阴影 纹理 中 查找 到 的 深度 值 可 能 并 非 当 前 泻 
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染 中 像素 的 深度 ， 而 是 相 邻 像素 的 深度 。 如 果 相 邻 像素 在 更 远 位 置 ， 则 当前 像素 会 被 错误 
地 显示 为 阴影 HP o 





图 8.11 阴影 的 “部 郊 ” 


阴影 症 疮 也 会 由 纹理 贴图 和 深度 计算 之 间 的 精度 差 引起 。 这 也 可 能 导致 侈 入 误差 ， 并 造 
成 对 像素 是 否 处 于 阴影 中 的 误 判 。 
幸运 的 是 ， 阴 影 竣 疮 很 容易 修复 。 由 于 阴影 痒 疮 通常 发 生 在 没有 阴影 的 表面 上 ， 这 里 有 
i 在 第 1 轮 中 将 每 个 像素 稍微 移 向 光源 ， 之 后 在 第 2 轮 将 它们 移 回 原 位 。 通 
这 么 做 足以 补偿 各 类 舍 入 误差 ,在 我 们 的 实现 中 简单 地 在 displayO) 函 数 中 调用 glPolygon- 
ed ee a 


void display(GLFWwindow* window, double currentTime) { 
/ 像 前 面 一 样 清 除 深度 缓冲 区 和 颜色 缓冲 区 


/ 像 前 面 一 样 为 相机 和 光源 视角 设置 变换 矩阵 
glBindFramebuffer(GL_FRAMEBUFFER, shadowBuffer); 
glFramebufferTexture(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT,shadowTex, 0); 
glDrawBuffer(GL_NONE); 

glEnable(GL_DEPTH_TEST); 

/减少 阴影 伪 影 

glEnable(GL_POLYGON_OFFSET_FILL); 


glPolygonOffset(2.0f, 4.0f); 


passOne(); 
glDisable(GL_POLYGON_OFFSET_FILL); 


glBindFramebuffer(GL_FRAMEBUFFER, 0); 
glActiveTexture(GL_TEXTURE0); 
glBindTexture(GL_TEXTURE_2D, shadowTex); 
glDrawBuffer(GL_FRONT); 


passTwo(); 
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将 这 几 行 代码 添加 到 display0 函 数 ， 可 以 显著 改善 程序 的 输出 ， 如 图 8.13 所 示 。 还 要 注 
意 ， 随 着 伪 影 的 消失 ， 现 在 可 以 看 到 环 面 的 内 圆 在 其 自身 上 显示 了 - -个 正确 的 小 阴影 。 

虽然 修复 阴影 竣 疮 很 容易 ， 但 有 时 修复 会 引起 新 的 伪 影 。 在 第 1 轮 之 前 移动 对 象 的 “ 技 
巧 ” 有 时 会 导致 在 对 象 阴 影 中 出 现 间 除 。 图 8.14 显示 了 一 个 这 样 的 例子 。 这 种 伪 影 通常 被 
称 为 “Peter Panning”， 因 为 有 时 它 会 导致 静止 物体 的 阴影 与 物体 底部 分 离 的 问题 〈 从 而 使 
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ee I 其 余部 分 分 离 ， 让 人 想起 和 詹姆斯、 马 修 ， 巴 利 笔下 的 角色 Peter 
an 9)。 修 复 此 伪 影 需要 调整 glPolygonOffset() 的 参数 。 如 果 它 们 太 小 ， 就 会 出 现 阴 影 竣 
如 果 太 大 ， 则 会 出 现 Peter Panning。 





图 8.13 泻 染 带 阴 影 的 场景 





图 8.14 ”修复 引起 新 的 伪 影 


在 实现 阴影 贴图 时 可 能 会 发 生 许 多 其 他 伪 影 。 如 重复 阴影 ， 因 为 在 第 1 轮 〈 存 入 阴影 组 
冲 区 时 ) 泻 染 的 场景 区 域 与 第 2 轮 中 泻 染 的 场景 区 域 不 同 〈 来 自 不 同 的 观察 位 置 )。 这 种 差 
异 可 能 导致 在 第 2 轮 中 演 染 的 场景 中 , 某 些 区 域 尝试 使 用 范围 [0...1] 之 外 的 特征 坐标 来 访问 
阴影 纹理 。 回 想 一 下 ， 在 这 种 情况 下 默认 行为 是 GL_ REPEAT， 因 此 ， 这 可 能 导致 错误 的 重 
复 阴 影 。 

一 种 可 能 的 解决 方案 是 将 以 下 代码 行 添加 到 setupShadowBuffers(), 将 纹理 换行 模式 设置 
为 “ 夹 紧 到 边缘 ”。 

glTexParameteri(GL TEXTURE 2D, GL TEXTURE WRAP S$, GL CLAMP TO EDGE); 

glTexParameteri (GL TEXTURE 2D, GL TEXTURE WRAP T, GL CLAMP TO EDGE); 

这 样 纹理 边缘 以 外 的 值 会 被 限制 为 边缘 处 的 值 〈 而 非 重 复 )。 注 意 ， 这 种 方法 自身 也 有 

可 能 造成 伪 影 ， 即 当 阴 影 纹理 的 边缘 处 存在 阴影 时 ， 截 取 边 缘 可 能 产生 延伸 到 场景 边缘 的 
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“阴影 条 ”。 

一 种 常见 错误 是 锯齿 状 阴影 边缘 。 当 投射 的 阴影 明显 大 于 阴影 缓冲 区 可 以 准确 表示 的 
阴影 时 ， 就 有 可 能 出 问题 。 通 常 ， 这 取决 于 场景 中 物体 和 灯光 的 位 置 。 尤 其 当 光 源 在 距离 
物体 较 远 时 ， 更 容易 发 生 。 一 个 例子 如 图 8.15 所 示 。 





图 8.15 ”锯齿 状 阴影 边缘 


消除 锯齿 状 阴影 边缘 就 没有 处 理 之 前 的 伪 影 那么 简单 了 。 一 种 技术 是 在 第 1 轮 期 间 将 光 
位 置 移动 到 更 接近 场景 的 位 置 ， 然 后 在 第 2 轮 放 回 原始 位 置 。 另 一 种 常用 的 有 效 方法 则 是 
我 们 将 在 下 面 讨论 的 “柔和 阴影 ”方法 之 一 。 





8.7 永和 阴影 


目前 我 们 所 展示 的 阴影 生成 方法 都 仅 限 于 生成 硬 阴 影 ， 即 带 锐 边 的 阴影 。 但 是 ,现实 世 
界 中 出 现 的 大 多 数 阴 影 都 是 柔和 阴影 。 它 们 的 边缘 都 会 发 生 不 同 程度 的 模糊 。 在 本 节 中 ， 
我 们 将 探讨 现实 世界 中 柔和 阴影 的 外 观 ， 然 后 描述 在 OpenGL 中 模拟 它们 的 常用 算法 。 消 
除 锯齿 状 阴影 边缘 并 不 像 处 理 之 前 的 伪 影 那么 简单 。 


8.7.1 现实 世界 中 的 柔和 阴影 


柔和 阴影 的 成 因 有 很 多 ， eee 通常 在 自然 界 中 产生 柔和 阴影 
原因 是 , 真实 世界 的 光源 很 少 是 站 常常 是 区 域 光 源 。 男 一 个 原因 是 材料 和 表面 
的 缺陷 积累 ， en te 

图 8.16 ERT Yak ta TIN EA CIR Ast. YER, AR TAPE BN 3D 场 
景 ， 而 是 真实 的 照片 ， 是 本 书 作者 之 一 在 家 中 拍摄 的 。 

对 于 图 8.16 中 的 阴影 ， 有 两 点 需要 注意 。 

e 离 物 体 越 远 的 阴影 越 “ 柔 和 ” 离 物 体 越 近 的 阴影 越 “ 硬 ”。 在 对 比 物体 腿 附 近 的 阴 

影 与 右边 更 宽 的 阴影 时 ， 这 一 点 就 很 明显 了 。 
@ 上 距离 物体 越 近 的 阴影 显得 越 暗 。 
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光源 本 身 的 维度 会 导致 柔和 阴影 。 如 图 8.17 所 示 , 光源 上 各 处 会 投射 出 略微 不 同 的 阴影 。 
各 种 阴影 不 同 的 区 域 称 为 半 影 (penumbra)， 包 括 阴 影 边 缘 的 柔和 区 域 。 





图 8.16 现实 世界 中 的 柔和 阴影 示例 图 8.17 柔和 阴影 的 半 影 效果 


8.7.2 生成 柔和 阴影 








邻近 滤波 ( PCF ) 


有 多 种 方法 可 以 用 来 模拟 半 影 效果 以 在 软件 中 生成 柔和 阴影 。 最 简单 也 最 常见 的 一 种 方 
法 叫 作 百分比 邻近 滤波 (Percentage Closer Filtering, PCF). Æ PCF 中 ， 我 们 对 单个 点 周围 
的 儿 个 位 置 的 阴影 纹理 进行 采样 ， 以 估计 附近 位 置 在 阴影 中 的 百分比 。 根 据 附近 位 置 在 阴 
影 中 的 数量 ， 对 正在 泻 染 的 像素 的 光照 分 量 进行 修改 。 整 个 计算 可 以 在 片段 着 色 器 中 完成 ， 
所 以 我 们 只 需要 对 其 中 的 代码 进行 修改 。 PCF 还 可 用 
于 减少 锯齿 线 伪 影 。 

在 研究 实际 的 PCF 算法 之 前 , 我 们 先 看 一 个 类 似 
的 简单 示例 来 展示 PCF 的 目标 。 考 虑 图 8.18 中 所 示 
的 输出 片段 (像素 ) 集 ， 其 颜色 由 片段 着 色 器 计算 。 

假设 深 色 像 素 处 于 阴影 中 ， 这 是 阴影 贴图 计算 的 
结果 。 假设 我 们 可 以 访问 相 邻 的 像素 信息 ， 而 不 是 简 
单 地 如 网 所 示 演 染 像素 ( 即 包括 或 不 包括 漫 反 射 和 镜 
面 反射 分 量 )， 这 样 我 们 就 可 以 看 到 有 多 少 相 邻 像 素 
rah Abi 例如 ， 考 虑 图 8.19 LEH) 中 以 黄色 

出 显示 的 特定 像素 , 根据 图 8.18， 该 像素 不 在 阴影 和 
J. 











采样 
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在 高 亮 像素 的 9 个 像素 邻 域 中 ，3 个 像素 处 于 阴影 中 而 6 个 像素 处 于 阴影 外 。 因 此 ， 演 染 
像素 的 颜色 可 以 被 计算 为 该 像素 处 的 环境 光 分 量 加 上 
漫 反射 和 镜面 反射 分 量 的 9%6， 这 样 会 使 像素 一 定 程度 
(但 不 是 完全 ) 变 亮 。 在 整个 网 格 中 重复 此 过 程 将 会 产 
生 图 8.20 所 示 的 像素 颜色 。 注 意 ， 对 于 那些 邻 域 完全 
位 于 阴影 中 (或 阴影 外 ) 的 像素 ,生成 的 颜色 与 标准 阴 
影 贴图 相同 。 

与 上 例 不 同 的 是 ， 在 PCF 的 实现 中 ， 不 是 对 泻 染 
像素 临近 区 域内 的 每 个 像素 进行 采样 这 有 两 个 原因 : 
(a) 我 们 想 在 片段 着 色 器 中 执行 此 计算 ， 但 片段 着 色 
器 无 法 访问 其 他 像素 ; Co) 获得 足够 宽 的 半 影 效果 ( 例 MAR 
w, 10~20 像素 宽 ) 将 需要 为 每 个 被 泻 染 的 像素 采样 数 百 个 附近 的 像素 。 

PCF 解决 了 以 下 两 个 问题 。 首先， 我 们 不 试图 访问 附近 的 像素 ,而 是 在 阴影 贴图 中 对 附 
近 的 纹 素 进行 采样 。 片 段 着 色 器 可 以 执行 此 操作 ， 因 为 虽然 它 无 法 访问 附近 像素 的 值 ， 但 
它 可 以 访问 整个 阴影 贴图 。 其 次 ， 为 了 获得 足够 宽 的 半 影 效果 ， 需 要 对 附近 一 定数 量 的 阴 
影 贴图 纹 素 进 行 采样 ， 每 个 采样 的 纹 素 都 距离 所 泻 染 像素 的 纹 素 一 定 距 离 。 

半 影 的 宽度 和 采样 点 数 可 以 根据 场景 和 性 能 要 求 调整 。 例 如 ， 图 8.21 所 示 PCF 生成 的 
图 像 是 ， 每 个 像素 的 亮度 是 通过 对 64 个 不 同 的 纹 素 进行 采样 确定 的 ， 它 们 与 像素 的 纹 素 距 
离 各 不 相同 。 

柔和 阴影 的 准确 度 或 平滑 度 取决 于 所 采样 附 
近 纹 素 的 数量 。 因 此 ， 在 性 能 和 质量 之 间 需 要 权 
衡 一 采样 点 越 多 , 效果 越 好 , 但 计算 开销 也 越 多 。 
场景 的 复杂 性 和 给 定 应 用 所 需 的 帧 率 对 于 阴影 可 
实现 的 质量 有 着 相应 的 限制 。 每 像素 采样 64 个 点 
(如 图 8.21 所 示 ) 通常 是 不 切实 际 的 。 

一 种 用 于 实现 PCF 的 常见 算法 是 对 每 个 像素 
附近 的 4 个 纹 素 进 行 采样 , 其 中 样本 通过 指定 从 像 











素 对 应 纹 素 的 偏 移 量 选 择 。 对 于 每 个 像素 ,我 们 都 图 8.21 柔和 阴影 泻 染 
需要 改变 偏 移 量 , 并 用 新 的 偏 移 量 确定 采样 的 4 个 每 像素 64 次 采样 


纹 素 。 用 交错 方式 改变 偏 移 量 的 方法 被 称 为 抖动 ， 它 旨 在 使 得 柔和 阴影 边界 不 会 由 于 采样 
点 不 足 看 起 来 “ 结 块 ”。 

一 种 常见 的 方法 是 假设 有 4 种 不 同 偏 移 模式 ， 每 次 取 其 中 一 种 一 一 我 们 可 以 通过 计算 像 
素 的 glFragCoord mod 2 来 选择 当前 像素 的 偏 移 模式 。 之 前 有 提 到 ，glFragCoord 是 vec2 类 
型 ， 包含 像素 位 置 的 x、y 坐标 。 因 此 ，mod 计算 的 结果 有 4 种 可 能 的 值 : (0,0)、(0,1)、(1,0) 
或 (1,1)。 我 们 使 用 glFragCoord mod 2 的 结果 来 从 纹 素 空 间 〈 即 阴影 贴图 ) 4 种 不 同 偏 移 模 
式 中 选择 一 种 。 

偏 移 模式 通常 在 x Al y 方向 上 指定 ， 具 有 -1.5，--0.5，+0.5 和 +1.5 的 不 同 组 合 〈 也 可 以 
根据 需要 进行 缩放 )。 更 具体 来 说 , 由 glFragCoord mod 2 计算 得 到 的 每 种 情况 的 4 种 常用 偏 
移 模式 是 : 


io 
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偏 移 模 式 (0,0) 偏 移 模式 (0,1) 偏 移 模式 (1,0) 偏 移 模式 (1,1) 
采样 点 : 采样 点 : 采样 点 : 采样 点 : 
人) (s, =1.5, 8, +05) (s, =0.5, 8, ¥1.5) (s, —0.5, s, +0.5) 
(s, -1.5, s, =0.5) (s =1.5, 8, —1.5) (s, — 0.5, s, ~ 0.5) C= 0,8, = 1.5) 
(s, +0.5, s, +1.5) (s, + 0.5, s, +0.5) (s, +1.5, s, +1.5) (s, +1.5, s, +0.5) 
(s, + 0.5, s, — 0.5) (s, + 0.5, s, 一 1.5) (s, + 1.5, s,=0.5) (s, +1.5, s, 一 1.5) 


S$: 和 5S, 指 的 是 与 正在 演 染 的 像素 相对 应 的 阴影 贴图 中 的 位 置 So S), 在 本 章 的 代码 示 
例 中 标识 为 shadow_coord。 这 4 种 偏 移 模式 如 图 8.22 所 示 〔〈 见 彩 插 )， 每 种 情况 都 以 不 同 的 
颜色 显示 。 在 每 种 情况 下 ， 对 应 于 正 被 泻 染 的 像素 的 纹 素 位 于 该 情况 的 图 的 原点 。 请 注意 ， 
当 在 图 8.23〈 见 彩 插 ) 中 一 起 显示 时 ， 偏 移 的 交错 /抖动 很 明显 。 





Ca 


case: 


Se 
偏 移 模式 2= (1,0) Ai ERE = (1,1) 
图 8.22 ”抖动 的 4 像素 PCF 采样 示例 


case. case. 
偏 移 模式 = (0,0) 偏 移 模式 2= (0,1) 


让 我 们 来 针对 特定 像素 看 看 整个 计算 过 程 。 假 设 正在 演 染 的 像素 位 于 glFragCoord = 
(48,13)。 首先 我 们 确定 像素 在 阴影 贴图 的 4 个 采样 点 。 为 此 , 我 们 将 计算 vec2(48,13) mod 2, 
等 于 (0,1)。 因 此 我 们 选择 0,1) 所 对 应 的 偏 移 ， 在 图 8.22 中 以 绿色 显示 ， 并 且 在 阴影 贴 
图 对 相应 的 点 进行 采样 (假设 没有 指定 偏 移 的 缩放 量 )， 得 到 : 

@ (shadow_coord.x—1.5, shadow_coord.y+0.5) 

@ (shadow_coord.x—1.5, shadow_coord.y—1.5) 

@ (shadow _coord.x+0.5, shadow coord.y+0.5) 

@ (shadow_coord.x+0.5, shadow_coord.y—1.5) 

(回想 一 下 ，shadow_coord 是 阴影 贴图 中 与 正在 演 染 的 像素 相对 应 的 纹 素 的 位 置 一 一 在 
图 8.22 和 图 8.23 中 显示 为 白色 圆圈 )。 

接 下 来 ,对 我 们 选取 的 这 4 个 点 分 别 调用 textureProj(), 在 每 种 情况 下 都 返回 0.0 或 1.0, 
具体 取决 于 该 采样 点 是 否 在 阴影 中 。 将 4 个 结果 相 加 并 除 以 4.0， 就 可 以 确定 阴影 中 采样 
点 的 百分比 。 然 后 将 此 百分比 用 作 乘 数 ， 确 定 泻 染 当前 像素 时 要 应 用 的 漫 反 射 和 镜面 反射 
分 量 。 

尽管 采样 尺寸 很 小 一 一 每 个 像素 只 有 4 个 样本 一 一 这 种 抖动 方法 通常 可 以 产生 好 得 惊人 
的 柔和 阴影 。 图 8.24 是 使 用 4 像素 抖动 PCF 生成 的 。 虽 然 它 不 如 之 前 图 8.21 所 示 的 64 点 
采样 版 本 好 ， 但 演 染 速度 要 快 得 多 。 

在 下 一 节 中 ， 我 们 对 GLSL 片段 着 色 器 进行 编码 ， 实 现 4 采样 抖动 的 PCF 柔和 阴影 以 
及 之 前 展示 的 64 采样 PCF 柔和 阴影 。 
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图 8.23 ”抖动 的 4 像素 PCF 采样 
(4 种 偏 移 模 式 ) 


8.7.3 柔和 阴影 /PCF 程序 


第 8 章 阴影 


图 8.24 柔和 阴影 泻 染 一 一 每 像素 4 次 
采样 ， 使 用 抖动 


如 前 所 述 ， 柔 和 阴影 计算 可 以 完全 在 片段 着 色 器 中 完成 。 程 序 8.2 展示 了 片段 着 色 器 代 
码 ， 取 代 图 8.7 中 的 片段 着 色 器 。 添 加 的 PCF 相关 代码 已 突出 显示 。 


程序 8.2 百分比 邻近 滤波 ( PCF ) 
片段 着 色 器 


#version 430 


// 所 有 变量 定义 未 改动 


// 从 shadow_coord 返回 距离 (x，y) 处 的 纹 素 的 阴影 深度 值 





// shadow_coord 是 阴影 贴图 中 与 正在 渲染 的 当前 像素 相对 应 的 位 置 


float lookup(float ox, float oy) 


{ float t = textureProj(shadowTex, i 
shadow coord + vec4(ox * 0.001 * shadow _coord.w, oy * 0.001 * shadow coord.w, 3 
-0.01，0.0)); // 第 三 个 参数 (-0.01) 是 用 于 消除 阴影 辣 疮 的 偏 移 量 i 


return t; 


} 


void main (void) 

{ float shadowFactor = 0.0; 
vec3 L = normalize(vLightDir) ; 
vec3 N = normalize(vNormal) ; 
vec3 V = normalize (-vVertPos) ; 
vec3 H = normalize(vHalfVec) ; 


(Me aaa a 此 部 分 生成 一 个 4 采样 拌 动 的 柔和 阴影 


float swidth = 2.5; // 可 调整 的 阴影 扩散 量 
// 根据 glFragCoord mod 2 生成 4 采样 模式 中 的 一 个 


vec2 offset = mod(floor(gl FragCoord. 


shadowFactor += lookup(-1.5*swidth 
shadowFactor += lookup(-1.5*swidth 
shadowFactor += lookup( 0.5*swidth 
shadowFactor += lookup( 0.5*swidth 
shadowFactor = shadowFactor / 4.0; 


+ 
+ 
+ 
十 


offset 


xy), 2. 
offset. 


0) 


X, 


SRi 
offset. 
offset. 


X, 
X, 


* swidth; 

1.5*swidth - offset.y); 
-0.5*swidth - offset.y); 
1.5*swidth - offset.y); 
-0.5*swidth - offset.y); 


// shadowFactor 是 4 个 采样 点 的 平均 值 


// ----- 取消 本 节 注释 以 生成 64 采样 的 高 分 辨 率 柔 和 阴影 
// float swidth = 2.5; // 可 调整 的 阴影 扩散 量 
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float endp = swidth*3.0 +swidth/2.0; 

for (float m=-endp ; m<=endp ; m=m+swidth) 
/i for (float n=-endp ; n<=endp ; n=n+swidth) 
/ { ShadowFactor += lookup (m,n); 
it = } 


ShadowFactor = shadowFactor / 64.0; 


vec4 shadowColor globalAmbient * material.ambient + light.ambient * material.ambient; 
edColor light.diffuse * material.diffuse * max(dot(L,N),0.0) 
+ light.specular * material.specular 


* pow (max (dot (H,N),0.0),material.shininess*3.0); 


fragColor vec4 ((shadowColor.xyz + shadowFactor* (lightedColor.xyz)),1.0); 


程序 8.2 中 展示 的 片段 着 色 器 包含 4 采样 和 64 采样 的 PCF 柔和 阴影 的 代码 。 为 了 更 方便 
进行 采样 ， 我 们 | 需要 定义 lookup). 在 lookup) KŽP VH GLSL 函数 textureProj()， 从 而 
在 阴影 纹理 中 以 指定 偏 移 量 (ox，oy) 进 行 查找 。 偏 移 量 需 要 乘 以 1 / windowsize， 这 里 我 们 简 
单 地 假设 窗口 大 小 为 1 000 像素 x1 000 像素 ， 将 乘 数 硬 编码 为 0.001。” 

4 样本 抖动 的 计算 代码 在 peices dlls 示 ， 其 实现 遵循 上 一 节 中 描述 的 算法 。 同 
时 添加 了 一 个 比例 因子 swidth， 用 于 调整 阴影 边缘 的 “柔和 ”区 域 的 大 小 。 

64 采样 代码 以 注释 形式 出 现在 后 面 。 可 以 通过 取消 64 采样 代码 注释 并 注释 4 采样 代码 
以 使 用 64 采样 。 在 64 采样 代码 中 ，swidth 比例 因子 用 作 埠 套 循 环 中 的 步 长 ， 其 采样 距离 正 
被 泻 染 的 像素 的 不 同 距离 处 的 点 。 例 如 ， 当 使 用 代码 中 的 swidth 值 (2.5) 时 ， 程 序 将 沿 着 每 
个 轴 在 两 个 方向 上 以 1.25. 3.75. 6.25 和 8.25 的 距离 选择 采样 点 一 一 然后 根据 窗口 大 小 进行 
缩放 〈 如 前 所 述 ) 并 用 作 纹 理 坐 标 采样 阴影 纹理 。 在 这 么 多 采样 的 情况 下 ， 通 常 不 需要 使 
用 抖动 来 获得 更 好 的 结果 。 

图 8.25 展示 了 我 们 运行 的 环 面 /金字 塔 阴影 贴图 示例 ， 它 将 PCF 柔和 阴影 与 程序 8.2 中 的 
片段 着 色 器 相 结合 ， 分 别 使 用 了 4 采样 和 64 采样 的 方法 。swidth 的 选 值 取决 于 场景 ， 对 于 环 
面 /金字 塔 示例 ， 它 的 值 为 2.5， 而 对 于 之 前 的 图 8.21 中 显示 的 海豚 示例 ，swidth 的 值 为 8.0。 





图 8.25 PCF 柔和 阴影 演 染 





每 像素 4 次 采样 ， 抖 动 〈 左 ); 每 像素 64 URE, AE CA) 


D 我 们 还 需要 将 偏 移 乘 以 阴影 坐标 的 w 分 量 ， 因 为 OpenGL 在 纹理 查找 期 间 会 自动 将 输入 坐标 除 以 w SAER- AH 
略 了 这 种 称 为 透视 分 割 的 操 tr, ， 因此 必须 在 这 时 里 说 明 。 有 关 透 视 分 割 的 更 多 信息 ， 请 参阅 参考 资料 5 
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补充 说 明 


在 本 章 中 ， 我 们 仅 给 出 了 3D 图形 中 阴影 世界 的 最 基本 介绍 。 在 更 复杂 的 场景 中 ， 即 便 
使 用 本 章 提供 的 基础 阴影 贴图 方法 ， 也 可 能 需要 进行 进一步 的 研究 。 

例如 ， 当 场景 中 的 某 些 对 象 拥 有 纹理 的 情况 下 ， 添 加 阴影 时 必须 确保 片段 着 色 器 正确 区 
分 阴影 纹理 和 其 他 纹理 。 一 种 简单 的 方法 是 将 它们 绑 定 到 不 同 的 纹理 单元 ， 例 如 : 


layout (binding = 0) uniform sampler2DShadow shTex; 
layout (binding = 1) uniform sampler2D otherTexture; 


然后 ，C++ / OpenGL 应 用 程序 可 以 通过 它们 的 绑 定 值 来 引用 两 个 采样 器 。 

当场 景 使 用 多 个 灯光 时 ， 则 需要 多 个 阴影 纹理 一 一 每 个 光源 需要 一 个 阴影 纹理 。 此 外 ， 
每 个 光源 都 需要 单独 执行 第 1 HER, HER 2 轮 泻 染 中 合并 结果 。 

尽管 我 们 在 阴影 贴图 的 每 个 阶段 都 使 用 了 透视 投影 ， 但 值得 注意 的 是 ， 当 光源 是 远 距 离 
光源 和 定向 光源 而 非 我 们 使 用 的 位 置 光 时 ， 正 射 投 影 通常 才 是 首选 。 

生成 真实 的 阴影 在 计算 机 图 形 学 中 仍然 是 一 个 活跃 而 又 复杂 的 领域 , 其 中 提出 的 许多 技 
术 超出 了 本 书 的 范畴 。 我 们 鼓励 对 更 多 细节 感 兴趣 的 读者 研究 更 专业 的 资源 ， 如 时 10 
和 [MI16] r 

8.7.3 小 节 包 含 一 个 GLSL 函数 的 例子 〈 除 了 “main”)。 与 在 C 语言 中 一 样 ， 必 须 在 调 
用 它们 之 前 (或 “上 方 ”) 定义 函数 ， 否 则 必须 提供 前 向 声明 。 在 该 示例 中 则 不 需要 前 向 声 
明 ， 因 为 函数 定义 在 调用 代码 上 方 。 


=) xii 


Q 


8.1 在 程序 8.1 中 ,尝试 在 不 同 设置 下 使 用 glPolygonOffset()， 并 观察 对 像 的 伪 影 效果 ， 
如 Peter Panning。 

8.2 (RA) 修改 程序 8.1， 以 便 通 过 移动 鼠标 移动 灯光 ， 类 似 于 练习 7.1。 你 可 能 会 注 
意 到 某 些 照明 位 置 会 出 现 阴 影 伪 影 ， 而 其 他 位 置 则 没有 。 

8.3 (CRA) 给 程序 8.1 添加 动画 ， 使 得 对 象 或 光源 (或 两 者 一 起 ) 自行 移动 一 一 例如 
一 个 绕 男 一 个 旋转 。 如 果 向 场景 添加 地 平面 ， 阴 影 效 果 将 更 加 明显 ， 如 图 8.14 所 示 。 

8.4 (RA) 修改 程序 8.2， 将 lookup() 函 数 中 的 硬 编码 值 0.001 替换 为 更 准确 的 1.0 / 
shadowbufferwidth 和 1.0 / shadowbufferheight。 观 察 在 窗口 大 小 变化 的 情况 下 ， 这 种 变化 产 
生 了 何 种 程度 的 影响 (或 没有 影响 )。 

8.5 (FR) 更 复杂 的 百分比 邻近 滤波 (PCF) 的 实现 会 加 入 光 和 阴影 与 光 和 遮挡 物 
之 间 的 相对 距离 。 通 过 光线 靠近 或 远离 遮挡 物 时 《或 当 遮 挡 物 靠近 或 远离 阴影 时 )， 调 整 
半 影 的 大 小 ， 可 以 使 对 和 阴影 更 通 真 。 研 究 此 功能 现 有 的 实现 方法 ， 并 将 其 添加 到 程 
- 序 8.2 中 。 
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第 9 章 天 空 和 背景 


对 于 室外 3D 场景 ， 通 常 可 以 通过 在 地 平 线 上 创造 一 些 逼 真 的 效果 ， 来 增强 其 真实 感 。 
当 我 们 极目 远 姚 ， 目 光 越 过 附近 的 建筑 和 森林 ， 我 们 习惯 于 看 到 远 处 的 大 型 物体 ， 例 如 : 
云 、 群 山 或 太阳 《或 夜空 中 的 星星 和 月 亮 )。 但 是 ， 将 这 些 对 象 作为 单个 模型 添加 到 场景 
可 能 会 产生 高 到 无 法 承受 的 性 能 成 本 。 天 空 爹 或 天 空 穹顶 提供 了 有 效 且 相对 简单 的 方法 ， 
用 来 生成 令 人 信服 的 地 平 线 景 观 。 


po 


91 AS 


天 空 盒 的 概念 非常 巧妙 而 又 简单 : 

C1) 实例 化 一 个 立方 体 对 和 象 ; 

(2) 将 立方 体 的 纹理 设置 为 所 需 的 环境 ; 

(3) 将 立方 体 围绕 相机 放置 。 

我 们 已 经 知道 如 何 完成 以 上 这 些 步 又 。 但 还 有 少量 其 他 细节 需要 注意 。 

@ ”如 何 为 地 平 线 制 作 纹理 ? 

立方 体 有 6 个 面 , 我 们 需要 为 这 些 面 都 添加 纹理 。 一 种 方法 是 使 用 6 个 图 像 文件 和 6 个 
纹理 单元 。 男 一 种 常见 ( 且 高 效 ) 的 方式 则 是 使 用 一 个 包含 6 个 面 的 纹理 的 图 像 ， 如 图 9.1 
所 示 。 

上 例 中 的 纹理 立方 体贴 图 ， 仅 用 一 个 纹理 单元 ， 就 可 以 为 6 个 面 添加 纹理 的 图 像 。 立 方 
体贴 图 的 6 个 部 分 对 应 于 立方 体 的 顶部 、 底 部 、 正 面 、 背 面 和 两 侧 。 当 贴图 “ 包 右 ”在 立 
方 体 周围 时 ， 对 于 立方 体内 的 相机 而 言 ， 它 扮演 了 地 平 线 的 角色 ， 如 图 9.2 所 示 。 











图 9.1 6 面 天 空 盒 纹 理 立 方 体贴 图 图 9.2 立方 体贴 图 包 训 相 机 


E 
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使 用 纹理 立方 体贴 图 为 立方 体 添加 纹理 需要 指定 适当 的 纹理 坐标 。 图 9.3 展示 了 纹理 坐 
标的 分 布 ， 这 些 坐标 接着 会 分 配给 立方 体 的 每 个 项 点 。 





le 0.50 0.75 
图 9.3 立方 体贴 图 纹理 坐标 


@ 如 何 让 天 空 盒 看 起 来 “距离 很 还 ”? 

构建 天 空 盒 的 另 一 个 重要 因素 是 确保 纹理 的 表现 看 起 来 像 是 远 处 的 地 平 线 。 首 先 ， 人 们 

可 能 会 认为 这 需要 构建 巨大 的 天 空 盒 。 然 而 ， 事 实证 明 这 并 不 可 取 ， 因 为 巨大 的 天 空 盒 会 
拉 伸 和 扭曲 纹理 。 相 反 ， 通 过 使 用 以 下 两 个 技巧 ， 可 以 使 天 空 盒 显 得 巨大 《〈 从 而 感觉 距离 
很 远 ): 

Ca) 禁用 深度 测试 并 先 泻 染 天 空 盒 〈 在 泻 染 场景 中 的 其 他 对 象 时 重新 启用 深度 测试 ) 

(b) 天 空 盒 随 相机 移动 〈 如 果 相 机 需要 移动 )。 

通过 在 禁用 深度 测试 的 情况 下 先 绘制 天 空 盒 ， 深 度 缓 冲 器 的 值 仍 将 全 设 为 1.0〈 即 最 远 
距离 )。 因 此 ， 场 景 中 的 所 有 其 他 对 象 将 被 完全 泻 染 ， 即 天 空 盒 不 会 阻挡 任何 其 他 对 象 。 这 
样 ， 无 论 天 空 盒 的 实际 大 小 如 何 ， 会 使 天 空 盒 的 各 面 的 位 置 看 起 来 比 其 他 物体 都 更 远 。 而 
实际 的 天 空 盒 立方 体 本 身 可 以 非常 小 只 要 它 在 相机 移动 时 随 相 机 一 起 移动 即 可 。 图 9.4 展 
示 了 从 天 衬 盒 内 部 查看 简单 的 场景 〈 实 际 上 只 有 一 个 砖 纹理 环 面 )。 








Seed Naa UNCON ao 


图 9.4 从 天 空 EAN DERN 


这 里 我 们 得 益 于 对 图 9.4 与 之 前 图 9.2 和 图 9.3 的 关系 的 仔细 研究 。 注意, 场景 中 可 见 的 
天 衬 盒 部 分 是 立方 体贴 图 的 最 右 侧 部 分 。 这 是 因为 摄像 机 处 于 默认 方向 ， 面 向 -2Z 方向 ， 因 
eae teeter (如 图 9.3 所 示 )。 另 请 注意 ， 立 方 体 贴图 的 背面 在 场景 中 
演 染 时 会 呈 水 平反 转 状 态 ， 这 是 因为 立方 体贴 图 的 “背面 ”部 分 已 经 折 营 在 相机 周围 ， 因 
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此 看 起 来 是 经 过 侧 向 翻转 的 ， 如 图 9.2 所 示 。 

@ ”如 何 构 建 纹理 立方 体贴 图 ? 

从 图 稿 或 照片 构建 纹理 立方 体贴 图 图 像 时 ， 需 要 注意 避免 在 立方 体面 交汇 点 处 的 “ 接 
缝 ?， 并 创建 正确 的 透视 图 ， 才 能 让 天 空 盒 看 起 来 和 逼 真 且 无 畸变 。 有 许多 工具 可 以 辅助 达成 
这 一 目标 : Terragen, Autodesk 3Ds Max. Blender 和 Adobe Photoshop 都 有 用 于 构建 或 处 理 
立方 体贴 图 的 工具 。 同 时 ， 还 有 许多 网 站 提供 各 种 现成 的 立方 体 地 图 ， 既 有 付费 的 ， 也 有 
免费 的 。 
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替 带 纹理 的 立方 体 ， 其 基本 思路 与 天 空 盒 相 同 。 与 天 空 盒 相 同 ， 我 们 首先 泻 染 天 空 穹顶 CE 
用 深度 测试 )， 并 将 摄像 机 保持 在 天 空 穹顶 的 中 心 位 置 〈 图 9.5 中 的 天 空 穹顶 纹理 是 使 用 
Terragen [E16] 制 作 的 )。 





图 9.5 ”天空 穹顶 与 其 中 的 相机 


天 空 穹顶 相 比 天 空 使 有 自己 的 优势 。 例 如 ， 它 们 不 易 受到 畸变 和 接 颖 的 影响 (尽管 在 纹 
理 图 像 中 必须 考虑 极点 处 的 球形 畸变 )。 而 天 空 穹顶 的 缺点 之 一 则 是 球体 或 穹顶 模型 比 立方 
体 模 型 更 复杂 ， 天 空 穹顶 有 更 多 的 项 点， 其 数量 取决 于 期 望 的 精度 。 

当 使 用 天 空 穹顶 呈现 室外 场景 时 ,通常 与 地 平面 或 某 种 地 形 相 结 合 。 当 使 用 天 空 穹顶 呈 
现 宇 宙 中 的 场景 〈 例 如 星空 ) 时 ， 使 用 图 9.6 所 示 的 球体 通常 更 为 实际 (为 了 清晰 地 使 球体 
可 视 化 ， 球 体 表 面 添 加 了 一 道 虚线 )。 





t 





图 9.6 ”使 用 球体 的 星空 天 空 窍 项 ERK AP 
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尽管 天 空 容 项 有 许多 优点 ， 天 空 盒 仍然 更 为 常见 。OpenGL 对 天 空 盒 的 支持 也 更 好 ， 在 
进行 环境 贴图 时 更 方便 〈 本 章 后 面 会 介绍 )。 出 于 这 些 原 因 ， 我 们 将 专注 于 天 空 盒 的 实现 。 

天 空 使 有 两 种 实现 方法 : 从 头 开始 构建 一 个 简单 的 天 空 盒 ; 或 使 用 OpenGL 中 的 立方 体 
贴图 工具 。 它 们 有 各 自 的 优点 ， 因 此 我 们 下 面 都 会 进行 介绍 。 


9.3.1 ”从头 开 始 构建 天 空 盒 


我 们 已 经 涵盖 了 构建 简单 天 空 盒 所 需 的 几乎 所 有 内 容 。 第 4 章 介绍 了 立方 体 模型 ， 分 配 
纹理 坐标 已 经 在 本 章 前 面 图 9.3 中 进行 了 展示 ; 使 用 SOIL2 库 读 取 纹 理 以 及 在 3D 空间 中 放 
置 对 象 也 都 已 经 在 之 前 的 章节 进行 过 讲解 。 这 里 ， 我 们 将 看 到 如 何 简 单 地 启用 和 禁用 深度 
测试 (只 需要 一 行 代码 )。 

程序 9.1 展示 了 简单 天 空 盒 的 代码 结构 ， 场 景 中 仅 包含 一 个 带 纹理 的 环 面 。 纹 理 坐 标 分 
配 和 启用 /禁用 深度 测试 的 调用 已 突出 显示 。 


程序 9.1 简单 的 天 空 盒 
C++/OpenGL 应 用 程序 


// 所 有 变量 声明 ， 构 造 函数 和 init ( ) 与 之 前 相同 


void display (GLFWwindow* window, double currentTime) { 


// 清除 颜色 缓冲 区 和 深度 缓冲 区 ， 并 像 之 前 一 样 创建 投影 视图 矩阵 和 摄像 机 视图 矩阵 
ee 


// 准备 首先 绘制 天 空 盒 。M 矩阵 将 天 空 盒 放置 在 摄像 机 位 置 


mMat = glm::translate(glm::mat4(1.0f), glm::vec3(cameraX, cameraY, camera2)) 


// 构建 MODEL-VIEW 和 矩阵 
mvMat = VMat * mMat; 


// 如 前 ， 将 MV 和 PROT 矩阵 放 入 统一 变量 


// 设置 包含 顶点 的 缓冲 区 

glBindBuffer (GL ARRAY BUFFER, vbo[0]); 
glVertexAttribPointer (0,3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0) ; 


// 设置 包含 纹理 坐标 的 缓冲 区 

glBindBuffer (GL ARRAY BUFFER, vbo[1]); 
glVertexAttribPointer(1,2, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (1); 


// 激 活 天 空 盒 纹 理 
glActiveTexture (GL_TEXTUREO) ; 
glBindTexture(GL_TEXTURE 2D, skyboxTexture) ; 


154 第 9 章 天 空 和 背景 


glEnable (GL CULL FACE); 
glFrontFace (GL CCW);  // 立方 体 缠绕 顺序 是 顺 时 针 的 ， 但 我 们 从 内 部 查看 ， 因 此 使 用 逆 时 针 缠 绕 顺序 GL_CCW 


glDisable(GL DEPTH TEST) ; 
glDrawArrays(GL_TRIANGLES, 0, 36); // 在 没有 深度 测试 的 情况 下 绘制 天 空 盒 
glEnable (GL DEPTH TEST); 


// 现 在 像 之 前 一 样 绘制 场景 中 的 对 象 


G1 Dna eeite | ee cP: // 和 之 前 的 场景 中 的 对 象 一 样 
} 


void setupVertices(void) { 
// cube_vertices 定义 与 之 前 相同 
// 天 空 盒 的 立方 体 纹理 坐标 ， 如 图 9.3 所 示 
float cubeTextureCoord[72] = { 
TUOOF ON OF 2).00f/):0.338,)' 0,752, 0.338, // 背面 右 下 角 
0.75£, 0.33f, 0.75f, 0.66f, 1.00f, 0.66f, // 背面 左上 角 
ONSET 0.338, ODOFA 0. SIE Oan SD 10.68, // 右面 右 下 角 
0.50£, 0.33f, 0.50f, 0.66f, 0.75f, 7/ 右面 左上 和 角 
OSOE, NOOSE, 01 256,70 338), 001508, 0. 66h; // 正面 右 下 角 
DO 0.888, se 0, 66£ 1/0. DOr (Oy GOL, // 正面 左上 角 
DE, (One oe} 0L O0L, 0; 有 // 左面 右 下 角 
-00£, 0.33f, 0.00f, 0.66f, 0.25f, 0.66f, // 左面 左上 角 
+25) OBIE uO. BOE, 01 Iaf 10,505» 0.008, // 下 面 右 下 角 
.50f, 0.00£, 0.25f, 0.00f, 0.25£, 0.33f, // 下 面 左上 角 
.25f, 1.00f, 0.50f, 1.00f, 0.50f, 0.66f, // 上 面 右 下 角 
-50f, OL66f, 0.25f; 0.66£, 0.25f, 1,00 // 上 面 左 上 角 


GOTTO 


}; 
// 像 往常 一 样 为 立方 体 和 场景 对 象 设置 缓冲 区 


} 
// 用 于 加 载 着 色 器 、 纹 理 、main () 等 的 模块 ， 如 前 


标准 纹理 着 色 器 现在 用 于 场景 中 的 所 有 对 象 ， 包 括 立 方 体贴 图 : 
顶点 着 色 器 


#version 430 

layout (location = 0) in vec3 position; 
layout (location = 1) in vec2 tex coord; 
out vec2 tc; 

uniform mat4 mv_matrix; 

uniform mat4 proj_matrix; 

layout (binding = 0) uniform sampler2D s; 


void main(void) 
{ tc = tex_coord; 
gl_Position = proj_matrix * mv matrix * vec4(position,1.0); 


} 


片段 着 色 器 

#Version 430 

in vec2 tc; 

out vec4 fragColor; 

uniform mat4 mv_matrix; 

uniform mat4 proj_matrix; 

layout (binding = 0) uniform sampler2D s; 


void main(void) 
{ fragColor = texture(s,tc); 


} 
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程序 9.1 的 输出 如 图 9.7 所 示 ， 包 括 两 个 不 同 立方 体贴 图 纹理 以 及 各 自 的 泻 染 结果 。 


纹理 立方 体贴 图 (1) 纹理 天 空 盒 中 所 演 染 的 场景 


纹理 立方 体贴 图 (2) 纹理 天 空 盒 中 所 演 染 的 场景 





图 9.7 简单 天 空 盒 泻 染 结果 


如 前 所 述 , 天 空 盒 容易 受到 图 像 畸 变 和 接 缝 的 影响 。 接 缝 指 两 个 纹理 图 像 接触 的 地 方 ( 比 

沿 着 立方 体 的 边缘 ) 有 时 出 现 的 可 见 线条 。 图 9.8 Hes J 了 一 个 图 像 上 半 部 分 出 现 接 颖 的 示 
ai 它 是 运行 程序 9.1 时 出 现 的 伪 影 。 为 了 避免 接 颖 ， 需 要 仔细 构建 立方 体贴 图 图 像 ， 并 分 
配 精确 的 纹理 坐标 。 有 一 些 工 具 可 以 用 来 沿 图 像 边 缘 减 少 接 颖 (例如 "1 )， 不 过 这 个 主题 
超出 了 本 书 的 范围 。 





图 9.8 REM “Rese” THY 
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9.3.2 ”使 用 OpenGL 立方 体贴 图 


构建 天 空 盒 的 另 一 种 方法 是 使 用 OpenGL 纹理 立方 体贴 图 。OpenGL 立方 体贴 图 比 我 们 
在 上 一 节 中 看 到 的 简单 方法 稍微 复杂 一 点 。 但 是 ， 使 用 OpenGL 立方 体贴 图 有 自己 的 优点 ， 
例如 减少 接 颖 以 及 支持 环境 贴图 。 

OpenGL 纹理 立方 体贴 图 类 似 于 稍 后 将 要 研究 的 3D 纹理 ， 它 们 都 使 用 3 个 纹理 坐标 访 
问 一 一 通常 标记 为 〈s, 4,7) 而 不 是 我 们 目前 为 止 用 到 的 两 个 。OpenGL 纹理 立方 体贴 图 
的 另 一 个 特性 是 ， 其 中 的 图 像 以 纹理 图 像 的 左上 和 角 “〔 而 不 是 通常 的 左下 角 ) 作为 纹理 坐标 
(0, 0,0)， 这 通常 是 混乱 产生 的 源头 。 

程序 9.1 中 展示 的 方法 通过 读 入 单个 图 像 来 为 立方 体贴 图 添加 纹理 ， 而 程序 9.2 中 展示 
的 loadCubeMap(0) 函 数 则 读 入 6 个 单独 的 立方 体面 图 像 文件 。 正 如 我 们 在 第 5 章 中 所 学 的 ， 
有 许多 方法 可 以 读 取 纹理 图 像 ， 我 们 选择 使 用 SOIL2 库 。 在 这 里 ，SOIL2 用 于 实例 化 和 加 
载 OpenGL 立方 体贴 图 也 非常 方便 。 我 们 先 找 到 需要 读 入 的 文件 ， 然 后 调用 
SOIL load OGL cubemap()， 其 参数 包括 6 个 图 像 文件 和 一 些 其 他 参数 ， 类 似 于 我 们 在 第 5 
章 中 看 到 的 SOIL load OGL texture()。 在 使 用 OpenGL 立方 体贴 图 时 ， 无须 垂直 翻转 纹理 ， 
OpenGL 会 自动 进行 处 理 ， 注 意 ，loadCubeMap0 〇 函数 放 在 “Utils.cpp ”文件 中 。 

init(0) 函 数 现在 包含 一 个 函数 调用 以 启用 GL _TEXTURE CUBE MAP SEAMLESS, 它 告 
YF OpenGL 尝试 混合 立方 体 相 邻 的 边 以 减少 或 消除 接 颖 。 在 display0 中 , 立方 体 的 顶点 像 以 
前 一 样 沿 管线 向 下 发 送 ， 但 这 次 不 需要 发 送 立 方 体 的 纹理 坐标 。 我 们 将 会 看 到 ，OpenGL 纹 
理 立 方 体贴 图 通常 使 用 立方 体 的 顶点 位 置 作 为 其 纹理 坐标 。 之 后 禁用 深度 测试 并 绘制 立方 
体 。 然 后 为 场景 的 其 余部 分 重新 启用 深度 测试 。 

完成 后 的 OpenGL 纹理 立方 体贴 图 使 用 了 int 类 型 的 标识 符 进行 引用 。 与 阴影 贴图 时 一 
样 ， 通 过 将 纹理 包 囊 模式 设置 为 “ 夹 紧 到 边缘 ” 可 以 减少 沿边 框 的 伪 影 。 在 这 种 情况 下 ， 
它 还 可 以 帮助 进一步 缩小 接 缝 。 请 注意 ， 这 里 需要 为 3 个 纹理 坐标 s、t 和 + 都 设置 纹理 包 
RIR o 

在 片段 着 色 器 中 使 用 名 为 samplerCube 的 特殊 类 型 的 采样 器 访问 纹理 。 在 纹理 立方 体贴 
图 中 ， 从 采样 器 返回 的 值 是 沿 着 方向 向 量 (s, t +) 从 原点 “看 到 ”的 纹 素 。 因 此 ， 我 们 通常 可 
以 简单 地 使 用 传 入 的 插值 顶点 位 置 作 为 纹理 坐标 。 在 顶点 着 色 器 中 ， 我 们 将 立方 体 顶 点 位 
置 分 配 到 输出 纹理 坐标 属性 中 ， 以 便 在 它们 到 达 片 段 着 色 器 时 进行 插值 。 另 外 需要 注意 ， 
在 顶点 着 色 器 中 ， 我 们 将 传 入 的 视图 矩阵 转换 为 3X3， 然 后 再 转换 回 4X4。 这 个 “技巧 ” 
有 效 地 移 除了 平移 分 量 ， 同 时 保留 了 旋转 〈 回 想 一 下 ， 平 移 值 在 转换 矩阵 的 第 四 列 中 )。 这 
样 ， 就 将 立方 体贴 图 固定 在 了 摄像 机 位 置 ， 同 时 仍 允 许 合成 相机 “环顾 四 周 ”。 


程序 9.2 OpenGL 立方 体贴 图 天 空 盒 


C++/OpenGL application 








int brickTexture, skyboxTexture; 
int renderingProgram, renderingProgramCubeMap; 


void init(GLFWwindow* window) 
renderingProgram = 
renderingProgramCubeMap = Utils::createShaderProgram("vertCShader.glsl", "fragCShader.gls1"); 


setupVertices(); 


Utils: :createShaderProgram("vertShader.glsl", "fragShader.glsl"); 


{ 
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brickTexture = Utils::loadTexture("brickl.jpg") ; 
skyboxTexture = Utils::loadCubeMap ("cubeMap") ; 
glEnable(GL TEXTURE CUBE MAP SEAMLESS) ; 


void display(GLFWwindow* window, double currentTime) { 


// 清除 颜色 缓冲 区 和 深度 缓冲 区 ， 并 像 之 前 一 样 创建 投影 视图 矩阵 和 摄像 机 视图 矩阵 


/7 准备 首先 绘制 天 空 念 _ 注意， 现在 它 的 泻 染 程序 不 同 了 


glUseProgram (renderingProgramCubeMap) ; 
// 将 P、V 甜 阵 传 入 相应 的 统一 变量 


// 初始 化 立方 体 的 顶点 缓冲 区 〈 这 里 不 再 需要 纹理 坐标 缓冲 区 ) 
glBindBuffer(GL_ARRAY BUFFER, vbo[0]); 
glVertexAttribPointer(0, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0) ; 


// 激活 立方 体贴 图 纹理 
glActiveTexture (GL_TEXTUREO) ; 
glBindTexture (GL TEXTURE CUBE MAP, skyboxTexture) ; 


// 禁用 深度 测试 ， 之 后 绘制 立方 体贴 图 
glEnable(GL_CULL_FACE) ; 


glFrontFace(GL_CCW) ; 


glDisable(GL_DEPTH TEST) ; 


glDrawArrays(GL TRIANGLES, 0, 36); 
glEnable (GL DEPTH TEST) ; 
// 绘制 场景 其 余 内 容 


GLuint Utils::loadCubeMap(const char *mapDir) { 
GLuint textureRef; 


// 假设 6 个 纹理 图 像 文件 xp、xn、yp、yn、 


string xp = 


string xn 
string yp 
string yn 


string zp = 


string zn 


textureRef = SOIL_load_OGL_cubemap(xp.c_str(), xn.c_str(), yp.c_str(), yn.c_str(), 
zp.c_str(), zn.c_str(), SOIL LOAD AUTO, SOIL CREATE NEW ID, SOIL FLAG MIPMAPS) ; 


mapDir; 
mapDir; 
mapDir; 
mapDir; 
mapDir; 
mapDir; 


xp + "/xp. 
人 请 
"/yp. 
"/yn. 
"fap. 
OLIN 


xn 


yo t 
yn 


zp 
zn 


+ 


+ 


zp, zn 都 是 JPG 格式 图 像 
jpg"; 
jpg"; 
jpg"; 
jpg"; 
jpg"; 
jpg"; 


// 场景 中 的 环 面 
// 包含 天 空 盒 纹 理 的 文件 来 


if (textureRef == 0) cout << "didnt find cube map image file" << endl; 


glBindTexture (GL TEXTURE CUBE MAP, textureRef) ; 


// Wh> Beat 


glTexParameteri(GL TEXTURE CUBE MAP, GL TEXTURE WRAP S, GL CLAMP TO EDGE); 
glTexParameteri(GL TEXTURE CUBE MAP, GL TEXTURE WRAP T, GL CLAMP TO EDGE); 
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glTexParameteri (GL TEXTURE CUBE MAP, GL TEXTURE WRAP R, GL CLAMP TO EDGE); 


return textureRef; 


} 


顶点 着 色 器 

#version 430 

layout (location = 0) in vec3 position; 
out vec3 tc; 


uniform mat4 v_matrix; 
uniform mat4 proj matrix; 
layout (binding = 0) uniform samplerCube samp; 


void main(void) 

{ 
tc = position; // 纹理 坐标 就 是 顶点 坐标 
mat4 vrot matrix = mat4(mat3(v_matrix)); // 从 视图 矩阵 中 删除 平移 
gl_Position = proj_matrix * vrot_matrix * vec4(position, 1.0); 


} 


片段 着 色 器 

#version 430 

in vec3 tc; 

out vec4 fragColor; 


uniform mat4 v_matrix; 
uniform mat4 proj matrix; 
layout (binding = 0) uniform samplerCube samp; 


void main(void) 
{ fragColor = texture(samp, tc); 


9.4 环境 贴图 


在 照明 和 材质 章节 中 ， 我 们 考虑 了 物体 的 “光泽 ”。 然而， 我 们 从 未 对 非常 内 亮 的 物体 
进行 建 模 ， 例 如 镜子 或 铬 制品 。 这 些 物体 在 有 小 范围 镜面 高 光 的 同时 ， 还 能 够 反射 出 周转 
物体 的 镜像 。 当 我 们 看 向 这 些 物 品 时 ， 我 们 会 看 到 房间 里 的 其 他 东西 ， 有 时 甚至 会 看 到 我 
们 自己 的 倒影 。ADS 照明 模型 并 没有 提供 模拟 这 种 效果 的 方法 。 

不 过 ， 纹 理 立方 体贴 图 提供 了 一 种 相对 简单 的 方法 来 模拟 至 少 部 分 模拟 ) 反射 表面 。 
其 诀窍 是 使 用 立方 体贴 图 来 构造 反射 对 象 本 身 。 “如 果 想 要 做 得 看 起 来 真实 ， 则 需要 找 我 们 
从 物体 上 看 到 的 周围 环境 所 对 应 的 纹理 坐标 。 

图 9.9 展示 了 使 用 视图 向 量 和 法 向 量 组 合计 算 反射 向 量 的 策略 ， 之 后 ， 该 反射 向 量 会 
来 从 立方 体贴 图 中 查找 纹 素 。 因 此 ， 反 射 向 量 可 用 来 直接 访问 纹理 立方 体贴 图 。 当 立方 体 
贴图 用 于 上 述 功能 时 ， 称 其 为 环境 贴图 。 

我 们 在 之 前 研究 Blinn-Phong 照明 时 计算 过 反射 向 量 。 除 了 我 们 现在 使 用 反射 向 量 从 纹 
理 贴 图 中 查找 值 ， 这 里 的 反射 向 量 概念 和 之 前 类 似 。 这 种 技术 称 为 环境 贴图 或 反射 贴图 。 


© 同样 的 技巧 也 适用 于 通过 对 反光 物体 添加 天 空 穷 项 纹理 图 像 来 用 天 空 穷 项 替代 天 空 盒 的 情况 。 
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如 果 使 用 我 们 描述 的 第 二 种 方法 (在 9.3.2 小 节 中 ,使 用 OpenGL GL_TEXTURE_CUBE_MAP) 
实现 立方 体贴 图 ， 那 么 OpenGL 可 以 使 用 与 之 前 为 立方 体 添 加 纹理 相同 的 方法 来 进行 环境 
贴图 查找 。 我 们 使 用 视图 向 量 和 曲面 法 向 量 计算 视图 向 量 对 应 的 离开 对 象 表面 的 反射 向 量 。 
然后 可 以 使 用 反射 向 量 直 接 对 纹理 立方 体贴 图 图 像 进行 采样 。 查 找 过 程 由 OpenGL 
samplerCube 辅助 实现 ; 回忆 上 一 节 中 ，samplerCube 使 用 视图 方向 向 量 索引 。 因 此 ， 反 射 
向 量 非 常 适用 于 查找 所 需 的 纹 素 。 













“ 闪 亮 ”物体 g 
观察 向 量 pi cco aan 


反射 向 量 
表面 法 向 量 
图 9.9 ”环境 贴图 总 览 


实现 环境 贴图 需要 添加 相对 少量 的 代码 。 程 序 9.3 展示 了 display(O) 函 数 和 init0) 函 数 以 及 
相关 着色 器 中 的 更 改 ， 以 使 用 环境 贴图 泻 染 “反射 ” 环 面 。 所 有 更 改 都 已 经 高 亮 显示 。 值 
得 注意 的 是 ， 如 果 使 用 了 Blinn-Phong 照明 ， 那 么 很 多 需要 添加 的 代码 可 能 已 经 存在 了 。 真 
正 新 的 代码 部 分 在 片段 着 色 器 中 [在 main() 函 数 中 ]。 

乍 一 看 程序 9.3 中 突出 显示 的 代码 好 像 并 不 是 新 代码 。 实际 上 , 在 我 们 研究 照明 的 时 候 ， 
已 经 看 到 过 几乎 相同 的 代码 。 然 而 ， 在 当前 情况 下 ， 法 向 量 和 反射 向 量 用 于 完全 不 同 的 目 
的 。 在 之 前 的 代码 中 ， 它 们 用 于 实现 ADS 照明 模型 。 而 在 这 里 ， 它 们 用 于 计算 环境 贴图 的 
纹理 坐标 。 因 此 ， 我 们 将 部 分 代码 高 亮 ， 以 便 读 者 可 以 更 轻松 地 追踪 法 向 量 和 反射 向 量 计 
算 的 使 用 ， 以 实现 这 一 新 目的 。 

泻 染 的 结果 会 显示 使 用 了 环境 贴图 的 “ 铬 制 ” 环 面 ， 如 图 9.10 所 示 〈 见 彩 插 )。 


眼睛 





图 9.10 用 于 创建 反射 环 面 的 环境 贴图 示例 


程序 9.3 ”环境 贴图 


void display (GLFWwindow* window, double currentTime) { 
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// 用 来 绘制 立方 体贴 图 的 代码 未 改变 
// 所 有 修改 都 在 绘制 环 面 的 部 分 
glUseProgram(renderingProgram) ; 
// 和 矩阵 变换 的 统一 变量 位 置 ， 包 括 法 向 量 的 变换 
mvLloc = glGetUniformLocation(renderingProgram, "mv_matrix"); 
projLoc = glGetUniformLocation(renderingProgram, "proj matrix"); 
nLoc = glGetUniformLocation(renderingProgram, "norm matrix"); 
// 构建 MODEL SRE, tài 
mMat = glm::translate(glm::mat4(1.0f), glm::vec3(torLocX, torLocY, torLocZ)); 
// 构建 MODEL-VIEW 和 矩阵， 如 前 
mvMat = vMat * mMat; 
invTrMat = glm::transpose (glm::inverse (mvMat)); 
// 法 向 量变 换 现在 在 统一 变量 中 
glUniformMatrix4fv(mvLoc, 1, GL FALSE, glm::value_ptr(mvMat) ); 
glUniformMatrix4fv(projLoc, 1, GL FALSE, glm::value_ptr(pMat) ); 
glUniformMatrix4fv(nLoc, 1, GL_FALSE , glm::value_ptr(invTrMat) ); 
// 激活 环 面 项 点 缓冲 区 ， 如 前 
glBindBuffer (GL ARRAY BUFFER, vbo[1]); 
glVertexAttribPointer(0, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (0) ; 
// 我 们 需要 激活 环 面 法 向 量 缓冲 区 
glBindBuffer(GL_ARRAY_BUFFER, vbo[2]); 
glVertexAttribPointer(1, 3, GL FLOAT, GL FALSE, 0, 0); 
glEnableVertexAttribArray (1); 
// 环 面 纹理 现在 是 立方 体贴 图 
glActiveTexture (GL TEXTUREO); 
glBindTexture (GL TEXTURE CUBE MAP, skyboxTexture) ; 
// 绘制 环 面 的 过 程 未 做 更 改 
glClear (GL DEPTH BUFFER BIT); 
glEnable (GL _ CULL FACE); 
glFrontFace (GL CCW); 
glDepthFunc (GL LEQUAL); 
glBindBuffer (GL ELEMENT ARRAY BUFFER, vbo[3]); 
glDrawElements (GL_TRIANGLES, numTorusIndices, GL UNSIGNED INT, 0); 
} 
顶点 着 色 器 


#version 430 

layout (location = 0) in vec3 position; 

layout (location = 1) in vec3 normal; 

out vec3 varyingNormal; 

out vec3 varyingVertPos; 

uniform mat4 mv matrix; 

uniform mat4 proj matrix; 

uniform mat4 norm matrix; 

layout (binding = 0) uniform samplerCube tex map; 


void main (void) 


Gaia 


idie 


wr 
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{ varyingVertPos = (mv matrix * vec4(position,1.0)).xyz; 
varyingNormal = (norm matrix * vec4(normal,1.0)).xyz; 
gl_Position = proj matrix * mv_matrix * vec4(position,1.0); 

} 


片段 着 色 器 

#version 430 

in vec3 varyingNormal; 

in vec3 varyingVertPos; 

out vec4 fragColor; 

uniform mat4 mv_matrix; 

uniform mat4 proj matrix; 

uniform mat4 norm_matrix; 

layout (binding = 0) uniform samplerCube tex map; 


void main(void) 

{ vec3 r = -reflect (normalize (-varyingVertPos), normalize (varyingNormal) ); 
fragColor = texture(tex_map, r); 

} 


虽然 该 场景 需要 两 组 着 色 器 一 一 一 组 用 于 立方 体贴 图 , 另 一 组 用 于 环 面 一 一 但 是 程序 9.3 
中 仅 展示 了 用 于 绘制 环 面 的 着 色 器 。 这 是 因为 用 于 泻 染 立 方 体贴 图 的 着 色 器 与 程序 9.2 中 的 
相同 。 通 过 对 程序 9.2 的 修改 得 到 程序 9.3 的 过 程 ， 总 结 如 下 。 

在 initO 函 数 中 : 

@ 创建 环 面 的 法 向 量 缓冲 区 [实际 上 在 setupVertices() 中 完成 ， 由 initO 调 用 ]; 

@ 不 再 需要 环 面 的 纹理 坐标 缓冲 区 。 





在 display) KŽP : 
@ 创建 用 于 变换 法 向 量 的 矩阵 〈 在 第 7 章 中 称 为 “norm matrix”) 并 将 其 连接 到 关联 


@ 激活 环 面 法 向 量 缓冲 区 ， 

@ 激活 纹理 立方 体贴 图 为 环 面 的 纹理 〈 而 非 之 前 的 “ 砖 ” 纹 理 )。 

在 顶点 着 色 器 中 : 

@ 将 法 向 量 和 norm matrix 相 加 ; 

@ 输出 变换 的 顶点 和 法 向 量 以 备 计 算 反 射 向 量 ， 与 在 照明 和 阴影 章节 中 所 做 的 相似 。 

在 片段 着 色 器 中 : 

@ 以 与 照明 章节 中 相似 的 方式 计算 反射 向 量 ; 

@ ”从 纹理 (现在 是 立方 体贴 图 ) 检索 输出 颜色 , 使 用 反射 向 量 而 非 纹理 坐标 进行 查找 。 

图 9.10 中 显示 的 演 染 结果 是 一 个 很 好 的 例子 , 展示 了 通过 简单 的 技巧 能 够 实现 强大 的 约 
觉 。 通 过 在 对 象 上 简单 地 绘制 背景 , 我 们 使 对 象 看 起 来 有 “金属 质感 ”而 根本 没有 进行 ADS 
材质 建 模 。 即 使 没有 任何 ADS 照明 被 整合 到 场景 中 ， 这 种 技巧 也 能 让 人 感觉 光 从 物体 反射 
出 来 。 在 这 个 例子 中 ， 我 们 甚至 会 感到 在 环 面 的 左下 方 似乎 有 一 个 镜面 高 光 ， 因 为 立方 体 
贴图 中 包括 太阳 在 水 中 反射 的 倒影 。 


补充 说 明 


正如 我 们 在 第 5 章 中 第 一 次 研究 纹理 时 的 情况 一 样 , 使 用 SOIL2 使 得 构建 立方 体贴 图 和 
为 立方 体贴 图 添加 纹理 变 得 容易 。 同 时 它 也 可 能 会 有 一 些 副作用 ， 即 阻挡 用 户 学 习 一 些 有 
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用 的 OpenGL 细节 内 容 。 当 然 ， 用 户 也 可 以 在 没有 SOIL2 的 情况 下 实例 化 并 加 载 OpenGL 
立方 体贴 图 。 虽 然 该 主题 超出 了 本 书 的 范围 ， 但 基本 步骤 如 下 : 

(1) 使 用 C++ 工具 读 取 6 个 图 像 文件 〈 它 们 必须 是 正方 形 ); 

(2) 使 用 glGenTextures() 为 立方 体贴 图 创建 纹理 及 其 整 型 引用 ; 

(3) 调用 glBindTexture0， 指 定 纹理 的 ID 和 GL_TEXTURE_ CUBE_ MAP; 

(4) 使 用 glTexStorage2D0 指 定 立 方 体 贴图 的 存储 需求 ; 

(5) 调用 glTexImage2D() 或 glTexSubImage2D0 将 图 像 分 配给 立方 体 的 各 个 面 。 

更 多 有 关 在 没有 SOIL2 的 情况 下 创建 OpenGL 立方 体贴 图 的 详细 信息 , 请 浏览 互联 网 上 
的 一 些 相 ggal [GE16] $ 

如 本 章 所 述 ， 环 境 贴图 的 主要 限制 之 一 是 它 只 能 构建 反射 立方 体贴 图 内 容 的 对 象 。 在 场 
景 中 泻 染 的 其 他 对 象 并 不 会 出 现在 使 用 贴图 模拟 反射 的 对 象 中 。 这 种 限制 是 否 可 以 接受 取 
决 于 场景 的 性 质 。 如 果 场 景 中 存在 必须 出 现在 镜面 或 铬 制 对 象 中 的 对 象 ， 则 必须 使 用 其 他 
方法 。 一 种 常见 的 方法 是 使 用 模板 缓冲 区 (在 第 8 章 中 有 提 到 ), 许多 网 络 教程 (例如 EV 中 、 
NE 和 [SR161) 中 都 有 描述 ， 不 过 它 超出 了 本 书 的 范围 。 

我 们 没有 介绍 天 空 穹顶 的 实现 ， 虽 然 它们 在 某 些 方面 可 以 说 比 天 空 盒 更 简单 ， 并 且 不 易 
受到 失真 的 影响 , 甚至 用 它 实现 环境 贴图 也 更 简单 一 一 至 少 在 数学 上 一 一 但 OpenGL 对 立方 
体贴 图 的 支持 常常 使 得 天 空 盒 更 加 实用 。 

在 书后 面部 分 涵盖 的 主题 中 ， 天 空 盒 和 天 幕 在 概念 上 可 以 说 是 最 简单 的 。 然 而 ， 让 它们 
看 起 来 令 人 信服 可 能 会 耗费 大 量 时 间 。 我 们 只 简要 介绍 了 可 能 出 现 的 一 些 问 题 〈 例 如 接 缝 )， 
但 根据 使 用 的 纹理 图 像 文件 ， 可 能 会 出 现 其 他 问题 ， 需 要 额外 修复 。 尤 其 是 在 动画 场景 中 
或 相机 可 以 通过 交互 进行 移动 时 。 

我 们 还 大 致 介绍 了 如 何 生成 可 用 且 令 人 信服 的 纹理 立方 体贴 图 图 像 。 这 方面 有 许多 优秀 
的 工具 ， 其 中 最 受 欢 迎 的 是 Terragen 5 0。 本章 中 的 所 有 立方 体贴 图 均 由 作者 使 用 Terragen 
制作 (图 9.6 中 的 星 域 图 除外 )。 
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9.1 (RA) 在 程序 9.2 中 ， 添 加 使 用 鼠标 或 键盘 移动 相机 的 功能 。 为 此 ， 你 需要 使 用 
先前 在 习题 4.2 中 开发 的 代码 来 构建 视图 和 矩阵。 还 要 为 前 后 移动 以 及 绕 各 轴 旋 转 相 机 的 功能 
分 配 鼠 标 或 键盘 操作 (你 需要 编写 这 些 函数 )。 完 成 这 些 操作 后 ， 你 应 该 能 够 在 场景 中 “ 飞 
KEE”, 并 能 够 注意 到 天 空 盒 始终 看 起 来 保持 在 遥远 的 地 平 线 上 。 

9.2 在 6 个 立方 体贴 图 图 像 文件 上 绘制 标签 ， 以 确认 实现 中 使 用 了 正确 的 方向 。 例 如 ， 
你 可 以 在 图 像 上 绘制 轴 标 签 ， 如 图 9.11 所 示 。 





图 9.11 6 个 立方 体贴 图 
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还 可 以 使 用 “ 带 标记 的 ”立方 体贴 图 来 验证 环境 贴图 环 面 中 的 反射 是 否 正确 呈现 。 

9.3 (RA) 向 程序 9.3 添加 动画 ， 以 便 场景 中 的 一 个 (或 多 个 ) 使 用 了 环境 贴图 的 对 
象 旋转 或 翻转 。 当 天 空 盒 纹 理 在 物体 表面 上 移动 时 ， 物 体 的 模拟 反射 性 质 会 更 明显 。 

9.4 CRA) 修改 程序 9.3， 以 使 场景 中 的 对 象 将 环境 贴图 与 纹理 混合 。 在 片段 着 色 器 
中 加 权 求 和 ， 如 第 7 章 中 所 述 。 

9.5 (研究 和 项 目 ) 了 解 使 用 Terragen [0E19 创 建 简单 立方 体贴 图 的 基础 知识 。 通 常 需要 
(在 Terragen 中 ) 制作 具有 所 需 地 形 和 大 气 模 式 的 “世界 ”， 然 后 将 Terragen 的 合成 相机 放 
置 在 前 、 后 、 右 、 左 、 顶 部 和 底部 以 保存 作为 各 视图 的 6 个 图 像 。 在 程序 9.2 和 程序 9.3 中 
使 用 新 生成 的 图 像 ， 观 察 它们 作为 立方 体贴 图 和 环境 贴图 呈现 的 外 观 。 使 用 Terragen 的 免 
费 版 本 足以 进行 此 练习 。 
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假设 我 们 想 要 对 不 规则 表面 的 物体 进行 建 模 ， 例 如 橘子 凹凸 的 表皮 、 和 葡萄 干 禄 皱 的 表面 
或 月 球 的 陨石 坑 表 面 。 我 们 该 怎么 做 ? 到 目前 为 止 ， 我 们 已 经 学 会 了 两 种 可 能 的 方法 : Cad 
我 们 可 以 对 整个 不 规则 表面 进行 建 模 ， 但 这 么 做 通常 不 切实 际 〈 一 个 有 许多 坑 的 表面 需要 
大 量 的 顶点 ); Co) 我 们 可 以 将 不 规则 表面 的 纹理 图 图 像 应 用 于 平滑 的 对 象 。 第 二 种 选择 通 
常 比较 高 效 。 但 是 ， 如 果 场 景 中 有 光源 ， 当 光源 (或 摄像 机 角度 〉 移动 时 ， 我 们 很 快 就 会 
发 现 物体 使 用 了 静态 纹理 泻 染 〈 以 及 物体 表面 是 平滑 的 )， 因 为 纹理 上 的 亮 区 和 暗 区 不 会 像 
真正 凹凸 不 平 的 表面 那样 ， 随 着 光源 或 摄像 机 移动 而 改变 。 

在 本 章 中 ， 我 们 将 探讨 几 种 与 实现 上 四 凸 表面 相关 的 方法 ， 通 过 使 用 光照 效果 ， 即 使 在 实 
际 对 象 模型 表面 平滑 的 情况 下 ， 也 能 使 对 象 看 起 来 具有 逼真 的 表面 纹理 。 我 们 将 首先 观察 
凹凸 贴图 和 法 线 贴图 ， 当 直接 为 对 象 添加 微小 表面 细节 会 使 得 计算 代价 过 高 时 ， 它 们 可 以 
为 场景 中 的 对 象 增加 相当 程度 的 真实 感 。 我 们 还 将 研究 通过 高 度 贴 图 实际 扰乱 光滑 表面 中 
顶点 的 方法 ， 这 对 于 生成 地 形 〈 和 其 他 一 些 用 途 ) 非常 有 用 。 


10.1 MOR 


在 第 7 章 中 ， 我 们 了 解 了 表面 法 向 量 在 创建 令 人 信服 的 光照 效果 中 是 至 关 重要 的 。 像 素 处 
的 光 强 度 主 要 由 反射 角 确定 ， 即 需要 考虑 到 光源 位 置 、 相 机 位 置 和 像素 处 的 法 向 量 。 因 此 ， 如 
果 我 们 能 找到 生成 相应 法 向 量 的 方法 ， 就 可 以 避免 生成 与 四 凸 不 平 或 裙 皱 表面 相对 应 的 顶点 。 

图 10.1 展示 了 对 于 单个 “ 凸 起 ”修改 法 向 量 的 概念 。 


‘ceil eas 


在 真实 凸 起 上 的 法 向 量 


修改 (“扰动 ”) 后 的 法 向 量 





图 10.1 用 于 凹凸 贴图 的 扰动 法 向 量 
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KE, WR BATTAL “Ma ee RE RA CRS, BST), POTEET 
算 当 表面 确实 凹凸 不 平时 其 上 的 法 向 量 。 当 场景 点 亮 时 ， 光 照会 让 人 产生 我 们 所 期 望 的 约 
觉 。 这 是 Blinn 在 1978 年 首次 提出 的 人， 随 着 在 片段 着 色 器 拥有 了 可 以 对 每 个 像素 进行 
光照 计算 的 能 力 ， 这 种 方法 就 变 得 切实 可 行 了 。 

程序 10.1 中 展示 了 顶点 着 色 器 和 片段 着 色 器 的 一 个 示例 ， 这 段 程序 会 生成 一 个 带 有 “高 
尔 夫 球 ”表面 的 环 面 ， 如 图 10.2 所 示 。 其 代码 几乎 与 我 们 之 前 在 程序 7.2 中 看 到 的 相同 。 片 
段 着 色 器 中 唯一 显著 的 变化 是 一 一 输入 的 已 插值 法 向 量 〈 在 原 程序 中 名 为 “varyingNormal”) 
在 这 里 变 得 凹凸 不 平 了 ， 其 方法 是 对 环 面 模型 的 原始 (未 变形 ) 顶点 的 了 了 和 Z 轴 应 用 正弦 
函数 。 请 注意 ， 这 里 需要 顶点 着 色 器 将 未 经 变换 的 顶点 沿 管线 传递 给 片段 着 色 器 。 





图 10.2 ”过 程式 凹凸 贴图 示例 
以 这 种 方式 对 法 向 量 进 行 改变 ， 即 在 运行 时 使 用 数学 函数 进行 计算 ， 称 为 过 程式 凹凸 


贴图 。 


程序 10.1 过 程式 凹凸 贴图 
顶点 着 色 器 





#version 430 
// 与 Phong 着 色相 同 ， 但 添加 此 输出 顶点 属性 


out vec3 originalVertex; 


sota mai le) 
{ // 添加 原始 顶点 ， 传 递 以 进行 插值 


originalVertex = vertPos; 
} 


片段 着 色 器 
#Version 430 
// 与 Phong 着 色相 同 ， 但 添加 此 输入 项 点 属性 


in Vec3 originalVertex; 


void main (void) 
Varese 
// 添加 如 下 代码 以 扰乱 传 入 的 法 向 量 

float a = 0.25; // a 控制 凸 起 的 高 度 
float b = 100.0; // b 控制 凸 起 的 宽度 
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float x = originalVertex.x; 

float y = originalVertex.y; 

float z = originalVertex.z; 

N.x = varyingNormal.x + a*sin(b*x);  // 使 用 正弦 函数 扰乱 传 入 法 向 量 
N.y = varyingNormal.y + a*sin(b*y); 

N.z = varyingNormal.z + a*sin(b*z); 

N = normalize (N); 


// 光照 计算 以 及 输出 的 fragColor REBO 现在 使 用 扰动 过 的 法 向 量 N 


10.2 ”法 线 贴图 


四 凸 贴图 的 一 种 替代 方法 是 使 用 查找 表 来 替换 法 向 量 。 这 样 我 们 就 可 以 在 不 依赖 数学 函 
数 的 情况 下 ， 对 凸 起 进行 构造 ， 例 如 月 球 上 的 陨石 坑 所 对 应 的 凸 起 。 一 种 使 用 查找 表 的 党 
见方 法 叫 作 法 线 贴图 。 

为 了 理解 法 线 贴 图 的 工作 原理 ， 我 们 首先 注意 ， 向 量 通过 3 字 节 存 储 ， 系 了 上 和 Z 分 量 
各 占 1 字 节 ， 就 可 以 达到 合理 的 精度 。 这 样 ， 我 们 就 可 以 将 法 向 量 存储 在 彩色 图 像 文件 中 ， 
其 中 RVG 和 B 分 量 分 别 对 应 于 处 了 和 2 图像 中 的 RGB 值 以 字 节 存储 ,通常 被 解释 为 [0...1] 
范围 内 的 值 ， 但 是 向 量 可 以 有 正 负 值 分 量 。 如 果 我 们 将 法 向 量 分 量 限制 在 [-1...+1] 范 围 内 ， 
那么 在 图 像 文件 中 将 法 向 量 N 存储 为 像素 的 简单 转换 是 : 

R=(N, +1)/2 
G=(N, +1)/2 
B=(N, +1)/2 

法 线 贴 图 使 用 一 个 图 像 文件 〈 称 为 法 线 贴 图 )， 该 图 像 文件 包含 在 光照 下 所 期 望 表面 外 
观 的 法 向 量 。 在 法 线 贴图 中 ， 向 量 相对 于 任意 平面 YY 表示 ， 其 筷 和 了 分 量 表示 与 “垂直 ” 
的 偏差 ， 其 Z 分 量 设置 为 1， 严格 垂 直 于 XY 平面 的 向 量 ( 即 没有 偏差 ) 将 表示 为 (0, 0, 1), 
而 不 垂直 的 向 量 将 具有 非 零 的 XY 和 /或 了 分 量 。 我 们 需要 使 用 上 面 的 公式 将 值 转换 至 RGB 空 
lal; 例如 ，(0, 0, D 将 存储 为 《0.5, 0.5, 1)， 因 为 实际 偏 移 的 范围 为 [-1...+1]， 而 RGB 值 的 
范围 为 [0...1]。 

我 们 可 以 通过 纹理 单元 的 另 一 种 妙用 来 生 
成 这 样 一 幅 法 线 贴图 : 我 们 在 纹理 单元 中 存储 
所 需 的 法 向 量 而 非 颜 色 。 然后 , 在 给 定 片 段 中 ， 
我 们 就 可 以 使 用 采样 器 从 法 线 贴图 中 查找 值 ， 
接 下 来 ， 我 们 将 所 得 的 值 作 为 法 向 量 ， 而 非 输 
出 像素 颜色 在 纹理 贴图 中 我 们 是 这 么 做 的 )。 

图 10.3 展示 了 一 个 法 线 贴图 图 像 文 件 的 例 
子 ， 通 过 将 GIMP 法 线 贴图 插件 "应 用 于 
Luna Eu19 纹 理 而 生成 。 法 线 贴 图 图 像 文件 并 不 
适合 作为 图 像 查 看 ， 我 们 展示 这 幅 图 就 是 为 了 
章 明 这 一 点 ， 法 线 贴图 最 终 看 起 来 基本 都 是 蓝 图 10.3 ”法 线 贴图 图 像 文件 示例 ED 
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色 的 。 这 是 因为 图 像 文 件 中 每 个 像素 的 B 值 ( 蓝 色 值 ) 都 是 1 (最 大 蓝 色 值 )， 这 会 让 它 在 作 
为 图 像 时 看 起 来 是 “ 蓝 色 的 ”。 

图 10.4 展示 了 两 个 不 同 的 法 线 贴图 图 像 文 件 〈 它 们 都 由 Luna MIRAE) 以 及 在 
Blinn-Phong 光照 模型 下 将 它们 应 用 于 球体 的 结果 。 





图 10.4 ”法 线 贴图 示例 


从 法 线 贴 图 查找 到 的 法 向 量 不 能 直接 使 用 ， 因 为 它们 是 相对 于 上 述 的 任意 XY 平面 定义 
的 ， 并 没有 考虑 它们 在 物体 上 的 位 置 以 及 在 相机 空间 中 的 方向 。 这 个 问题 的 解决 策略 是 建 
立 一 个 转换 矩阵 ， 用 于 将 法 向 量 转换 为 相机 空间 ， 如 下 所 示 。 

在 对 象 的 每 个 项 点 处 ， 我 们 考虑 与 对 象 相 切 的 平面 。 顶 点 处 的 物体 的 法 向 量 垂直 于 该 切 
面 。 我 们 在 该 切面 中 定义 两 个 相互 垂直 的 向 量 ， 同 时 也 垂直 于 法 向 量 ， 称 为 切 向 量 和 副 切 
向 量 〈《 有 时 称 为 副 法 向 量 )。 构 造 我 们 期 望 的 变换 矩阵 要 求 我 们 的 模型 包括 每 个 顶点 的 切 向 
量 〈 可 以 通过 计算 切 向 量 和 法 向 量 的 又 积 来 构建 副 切 向 量 )。 如 果 模 型 中 没有 定义 切 向 量 ， 
则 需要 通过 计算 得 到 它们 。 在 球体 的 情况 下 ， 可 以 通过 计算 得 到 精确 的 切 向 量 。 以 下 是 对 
程序 6.1 的 修改 : 


for (int i=0; i<=prec; i++) { 
for (int j=0; j<=prec; j++) { 
float y = (float) cos(toRadians(180.0f - i*180.0f / prec)); 


float x = -(float)cos(toRadians(j*360.0f / prec)) * (float) abs(cos(asin(y))); 
float z = (float) sin(toRadians(j*360.0f / prec)) * (float) abs(cos(asin(y))); 
vertices [i*(prect+1)+j] = glm::vec3(x, y, Zz); 

// 计算 切 向 量 

if (((x==0) && (y==1) && (z==0)) || ((x==0) && (y==-1) && (z==0))) // 如 果 是 北极 或 南极 ， 

{ tangent [ix (prec+1)+j] = glm::vec3(0.0f, 0.0f, -1.0£); // 设置 切 向 量 为 -2 轴 
} 

else // 和 否则， 计算 切 向 量 


{ tangent [i*(prec+1)+j] = glm::cross(glm::vec3(0.0f, 1.0f, 0.0£), glm::vec3(x,y,z)); 
} 
。// 其 余 计算 代码 不 变 
} 
} 


对 于 那些 表面 不 可 导 以 至 于 无 法 精确 求解 切 向 量 的 模型 ， 其 切 向 量 可 以 通过 近似 得 到 ， 
例如 在 构造 〈 或 加 载 ) 模型 时 ， 将 每 个 顶点 指向 下 一 个 顶点 的 向 量 作为 切 向 量 。 请 注意 ， 
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这 种 近似 可 能 会 导致 切 向 量 与 顶点 法 向 量 不 严格 垂直 。 因 此 ， 如 果 要 实现 适用 于 各 种 模型 
的 法 线 贴图 ， 需 要 考虑 这 种 可 能 性 〈 我 们 的 解决 方案 中 对 此 进行 了 处 理 )。 

切 向 量 与 顶点 、 纹 理 坐 标 以 及 法 向 量 一 样 ， 是 从 缓冲 区 VBO) 传递 到 顶点 着 色 器 中 的 
顶点 属性 。 然 后 ， 顶 点 着 色 器 通过 应 用 MV 和 矩阵 的 逆转 置 并 将 结果 沿 着 流水 线 转发 以 由 光 
栅 器 进行 插值 并 最 终 进入 片段 着 色 器 ， 从 而 对 正常 向 量 进行 处 理 。 逆 转 置 的 应 用 将 法 向 量 
和 切 向 量 转换 为 相机 空间 ， 之 后 我 们 使 用 又 积 构造 副 切 向 量 。 

一 旦 我 们 在 相机 空间 中 得 到 法 向 量 、 切 向 量 和 副 切 向 量 , 就 可 以 使 用 它们 来 构造 矩阵 ( 依 
其 分 量 命名 为 “TBN” 甜 阵 )， 该 矩阵 用 于 将 从 法 线 贴图 中 检索 到 的 法 向 量 转 换 为 在 相机 空 
间 中 相对 于 物体 表面 的 法 向 量 。 

在 片段 着 色 器 中 ， 新 法 向 量 的 计算 在 calcNewNormal() 函 数 中 完成 。 函 数 的 第 三 行 [ 包 
A dot (tangent, normal) ] 的 计算 确保 切 向 量 垂 直 于 法 向 量 。 新 的 切 向 量 和 法 向 量 的 又 积 就 
是 副 切 向 量 。 

然后 ， 我 们 创建 一 个 类 型 为 mat3 的 3x3 矩阵 ， 作 为 TBN。mat3 构造 函数 接收 3 个 向 量 
作为 参数 ， 生 成 一 个 矩阵 ， 其 中 项 行 是 第 一 个 向 量 ， 中 间 行 是 第 二 个 向 量 ， 底 行 是 第 三 个 
向 量 〈 类 似 于 从 摄像 机 位 置 构建 视图 和 矩阵， 见 图 3.13 )。 

着 色 器 使 用 片段 的 纹理 坐标 来 提取 与 当前 片段 对 应 的 法 线 贴图 单元 。 着 色 器 在 提取 时 使 
用 采样 器 变量 “normMap ”， 并 被 绑 定 到 纹理 单元 0 注意: 因此 在 C++ / OpenGL 应 用 程序 
中 必须 将 法 线 贴图 图 像 附 加 到 纹理 单元 0)。 因 为 需要 将 颜色 分 量 从 纹理 中 存储 范围 [0...1] 
转换 为 其 原始 范围 [-1 …+ 1]， 我 们 将 其 乘 以 2.0 再 减 去 1.0. 

然后 将 TBN 矩阵 应 用 于 所 得 法 向 量 以 产 
生 当 前 像素 的 最 终 法 向 量 。 着 色 器 的 其 余部 
分 与 用 于 Phong 光照 的 片段 着 色 器 相同 。 片 
段 着 色 器 代码 基于 Etay Meiri MYRA, 
如 程序 10.2 所 示 。 

制作 法 线 贴图 图 像 可 以 使 用 各 种 各 样 的 
工具 。 有 的 图 像 编辑 工具 就 有 制作 法 线 贴图 的 
功能 ， 例 如 GIMP SM 和 Photoshop MM。 它 
们 通过 分 析 图 像 中 的 边缘 ,推断 凸 起 和 四 陷 ， 
并 产生 相应 的 法 线 贴图 。 

图 10.5 显示 了 由 Hastings-Trew "9 基于 
NASA 卫星 数据 创建 的 月 面 纹理 图 。 其 相应 的 
法 线 贴图 由 GIMP 法 线 贴图 插件 "9, 通过 处 M 
理由 Hastings-Trew 创建 的 黑白 版 本 月 面 纹理 图 10.5 月 球 纹理 (上 ) 和 法 线 贴图 CP) 
图 生成 。 


程序 10.2 ”法 线 贴图 片段 着 色 器 


#version 430 
in vec3 varyingLightDir; 




















in vec3 varyingVertPos; 
in vec3 varyingNormal; 
in vec3 varyingTangent; 





ef ee a N 


10.2 ”法 线 贴 图 169 


in vec3 originalVertex; 

in vec2 tc; 

in vec3 varyingHalfVector; 
out vec4 fragColor; 


layout (binding=0) uniform sampler2D normMap; 


// 其 余 统一 变量 同 前 


vec3 calcNewNormal () 

vec3 normal = normalize (varyingNormal); 

vec3 tangent = normalize (varyingTangent); 

tangent = normalize(tangent ~ dot(tangent, normal) * normal); // 切 向 量 垂直 于 法 向 量 
vec3 bitangent = cross(tangent, normal); 


mat3 tbn = mat3(tangent, bitangent, normal); // 用 来 变换 到 相机 空间 的 TBN 矩阵 
vec3 retrievedNormal = texture (normMap,tc).xyz; 
retrievedNormal = retrievedNormal * 2.0 - 1.0; // 从 RGB 空间 转换 


vec3 newNormal = tbn * retrievedNormal; 
newNormal = normalize (newNormal) ; 
return newNormal; 


} 


void main (void) 

{ // 正规 化 光照 向 量 ， 法 向 量 和 视图 向 量 
Vec3 工 normalize (varyingLightDir) ; 
vec3 V normalize (-varyingVertPos) ; 
vec3 N = calcNewNormal (); 


// 获得 光照 向 量 和 曲面 法 向 量 之 间 的 角度 
float cosTheta = dot(L,N); 


// 为 Blinn 优化 计算 半 向 量 


vec3 H = normalize(varyingHalfVector) ; 


// 视图 向 量 和 反射 光 向 量 之 间 的 角度 
float cosPhi = dot(H,N); 


// 计算 ADS 贡献 (每 个 像素 ) 

fragColor = globalAmbient * material.ambient 

+ light.ambient * material.ambient 

+ light.diffuse * material.diffuse * max(cosTheta,0.0) 

+ light.specular * material.specular * pow(max(cosPhi,0.0), material.shininess*3.0); 
} 


图 10.6 展示 了 使 用 两 种 不 同方 式 泻 染 的 ， 用 以 表现 月 球 表面 的 球体 。 图 10.6 左 图 中 ， 
球体 使 用 了 原始 的 纹理 贴图 ， 图 10.6 右 图 中 ， 球 体 使 用 法 线 贴 图 的 图 像 作为 纹理 〈 供 参 
考 )。 它 们 都 没有 应 用 法 线 贴 图 。 虽 然 左 侧 使 用 了 纹理 的 “月 球 ” 非 常 逼 真 ， 但 仔细 观察 
可 以 发 现 ， 纹 理 图 案 很 明显 拍摄 于 阳光 从 左 侧 照 亮 月 球 的 时 候 ， 因 为 其 山 状 的 阴影 投射 到 
了 右 侧 (在 底部 中 心 附近 的 火山 口中 最 明显 )。 如 果 我 们 使 用 Phong 着 色 为 此 场景 添加 光 
照 ， 然 后 移动 月 球 、 相 机 或 灯光 来 给 场景 添加 动画 ， 就 会 发 现 月 球 上 的 阴影 不 会 如 我 们 期 
望 地 改变 。 

此 外 ， 随 着 光源 的 移动 (或 相机 移动 )， 期 望 中 会 在 山形 上 出 现 许多 镜面 高 光 。 但 
是 图 10.6 左 图 使 用 了 标准 纹理 的 球体 将 只 产生 一 个 镜面 高 光 ， 对 应 于 光滑 球体 上 所 出 
现 的 高 光 ， 这 看 起 来 非常 不 现实 。 配 合法 线 贴图 可 以 显著 提高 这 类 对 象 在 光照 下 的 真 
实感 。 


170 第 10 章 增强 表面 细节 





图 10.6 使 用 月 面 纹理 的 球体 〈 左 ) 和 使 用 法 线 贴图 的 球体 〈 右 ) 


当 我 们 在 球体 上 使 用 法 线 贴 图 〈 而 不 是 纹理 ) 时 ， 我 们 会 得 到 图 10.7 所 示 的 结果 。 尽 管 
它 不 像 标准 纹理 那么 真实 〈 现 在 )， 但 是 现在 它 确实 响应 了 光照 变化 。 图 10.7 的 第 一 张 图 像 
中 从 左 侧 进行 光照 ， 第 二 张 图 像 中 则 从 右 侧 进行 光照 。 请 注意 蓝 色 和 黄色 箭头 所 示 部 分 展 
示 了 山 兰 周围 漫 反射 光 的 变化 以 及 镜面 反射 高 光 的 移动 。 





图 10.7 法 线 贴图 对 月 球 的 影响 


图 10.8 展示 了 在 使 用 Phong 光照 模型 的 情况 下 ， 将 法 线 贴图 与 标准 纹理 相 结 合 的 效果 。 
月 球 的 图 像 通过 漫 射 区 域 进行 了 增强 ， 镜 面 高 光 区 域 也 会 响应 光源 的 移动 (或 相机 或 物体 
移动 )。 两 个 图 像 中 的 光照 分 别 来 自 左 侧 和 右 侧 。 





图 10.8 纹理 加 法 线 贴图 ， 分 别 从 左 侧 和 右 侧 进行 光照 
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我 们 的 程序 现在 需要 两 个 纹理 一 一 一 个 用 于 月 球 表 面 图 像 ， 一 个 用 于 法 线 贴图 一 一 因此 
需要 有 两 个 采样 器 。 片 段 着 色 器 使 用 之 前 在 7.6 节 中 所 描述 的 技术 ,将 纹理 颜色 与 经 光照 计 
算 所 得 的 颜色 进行 混合 ， 如 程序 10.3 所 示 。 


程序 10.3 ”纹理 加 法 线 贴图 

// 片段 着 色 器 中 的 变量 和 结构 与 之 前 相同 ， 加 上 

layout (binding=0) uniform sampler2D s0; // 法 线 贴图 
layout (binding=1) uniform sampler2D sl; // 纹理 
void main(void) 


{ // 计算 与 之 前 相同 ， 直 到 











vec3 N = calcNewNormal (); 
vec4 texel = texture(sl,tc); // 标准 纹理 
// 反射 计算 与 之 前 相同 ， 然 后 混合 结果 
fragColor = globalAmbient + 
texel * (light.ambient + light.diffuse * max(cosTheta,0.0) 


+ light.specular * pow(max(cosPhi,0.0), material.shininess) ); 


} 


有 趣 的 是 ， 法 线 贴 图 可 以 从 多 级 渐 远 纹理 贴图 CMipmapping) 中 受益 ， 因 为 在 第 5 章 中 
看 到 的 纹理 化 产生 的 “锯齿 ” 伪 影 ， 在 使 用 纹理 图 像 进行 法 线 贴图 时 也 会 发 生 。 图 10.9 分 
别 展示 了 未 使 用 多 级 渐 远 纹理 贴图 和 使 用 了 多 级 渐 远 纹理 贴图 进行 法 线 贴图 的 月 球 。 尽 管 
在 静止 的 图 像 中 不 容易 观察 到 ， 但 是 左边 的 球体 (未 使 用 多 级 渐 远 纹理 贴图 ) 周边 有 闪烁 
的 伪 影 。 





图 10.9 发 现 贴图 伪 影 ， 以 及 使 用 多 级 渐 远 纹理 贴图 校正 后 的 图 像 


对 于 法 线 贴图 而 言 ， 各 向 异性 过 滤 CAF) 更 有 效 ， 它 不 但 减少 了 闪烁 的 伪 影 ， 同 时 还 
保留 了 细节 ， 如 图 10.10 所 示 ( 比 较 右 下 和 角 边缘 的 细节 )。 图 10.11 中 展示 了 使 用 相等 的 纹理 
权重 和 光照 权重 ， 光 照应 用 了 法 线 贴 图 及 AF 的 情况 下 得 到 的 结果 。 

最 终 的 泻 染 结果 并 不 完美 。 无 论 光 照 如 何 ， 原 始 纹理 图 像 中 出 现 的 阴影 仍 将 显示 在 泻 染 
结果 上 。 此 外 ， 虽 然 法 线 贴 图 可 以 影响 漫 反 射 和 镜面 反射 效果 ， 但 它 无 法 投射 阴影 。 因 此 ， 
当 表 面 特征 较 小 时 ， 最 适用 法 线 贴图 。 
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图 10.10 使 用 各 向 异性 过 滤 进 行 法 线 贴图 图 10.11 纹理 加 各 向 异性 过 滤 法 线 贴 图 


10.3 ”高 度 贴 图 





现在 我 们 扩展 法 线 贴图 的 概念 一 一 从 纹理 图 像 用 于 扰动 法 向 量 到 扰乱 顶点 位 置 本 身 。 实 
际 上 ， 以 这 种 方式 修改 对 象 的 几何 体 具 有 一 定 的 优势 ， 例 如 使 表面 特征 沿 着 对 象 的 边缘 可 
见 ， 并 使 特征 能 够 响应 阴影 贴图 。 我 们 将 会 看 到 ， 它 还 可 以 帮助 构建 地 形 。 

一 种 实用 的 方法 是 使 用 纹理 图 像 来 存储 高 度 值 ， 然 后 使 用 该 高 度 值 来 提升 (或 降低 ) 顶 
点 位 置 。 含 有 高 度 信 息 的 图 像 称 为 高 度 图 ， 使 用 高 度 图 更 改 对 象 的 顶点 的 方法 称 为 高 度 贴 
图 >。 高 度 图 通常 将 高 度 信 息 编码 为 灰 度 颜色 : (0,0,0 CE6) = 低 高 度 ，(1,1,1) (白色) = 
高 高 度 。 这 样 一 来 通过 算法 或 使 用 “画图 ”程序 就 可 以 轻松 创建 高 度 图 。 图 像 的 对 比 度 越 
高 ， 其 表示 的 高 度 变 化 越 大 。 这 些 概念 将 在 图 10.12 (显示 随机 生成 的 地 图 ) 和 图 10.13〈 显 
示 有 组 织 的 模式 的 地 图 ) 中 说 明 。 


高 度 变 化 小 高 度 变化 大 





图 10.12 高 度 图 示例 


© 这 里 使 用 了 高 度 贴图 说 法 , 通过 纹理 图 像 更 改 顶 点 的 方法 一 般 称 为 位 移 贴图 /置换 贴图 。 高度 图 除了 用 于 位 移 贴图 /置换 贴图 ， 
有 时 也 用 于 视差 贴图 ， 请 读者 阅读 时 注意 区 别 。 译 者 注 
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侧 视图 
PAS 





图 10.13 a RENE RE 


改变 顶点 位 置 是 否 有 用 取决 于 改变 的 模型 。 顶 点 操作 可 以 在 顶点 着 色 器 中 轻松 完成 ， 当 
模型 顶点 细节 级 别 够 高 (例如 在 足够 高 精度 的 球体 中 〉 时， 改变 顶点 高 度 的 方法 效果 很 好 。 
但 是 se ARANTIA CPI EAS s ERA A EA T AA 
中 的 顶点 播 值 来 填充 细节 。 当 项 点 着 色 器 中 可 用 于 改变 高 度 的 顶点 很 少时 ， 许 多 像素 的 高 
度 将 无 法 从 高 度 图 中 检索 ， 而 需要 由 插值 生成 ， 从 而 导致 表面 细节 TRE. MA, ERRA 
色 器 中 是 不 可 能 进行 顶点 操作 的 ， 因 为 这 时 顶点 已 被 光栅 化 为 像素 位 置 。 

程序 10.4 展示 了 一 个 将 项 点 “向 外 ”( 即 在 表面 法 向 量 的 方向 上 ) 移动 的 顶点 着 色 器 代 
码 。 它 通过 将 顶点 法 向 量 乘 以 从 高 度 图 检索 所 得 的 值 ， 然 后 将 该 乘积 与 顶点 位 置 相 加 ， 以 
“向 外 ”移动 顶点 。 


程序 10.4 ”项 点 着 色 器 中 的 高 度 贴图 


#version 430 





layout (location=0) in vec3 vertPos; 
layout (location=1) in vec2 texCoord; 
layout (location=2) in vec3 vertNormal; 


out vec2 tc; 
uniform mat4 mv_matrix; 
uniform mat4 proj matrix; 


layout (binding=0) uniform sampler2D t; // 用 于 纹理 
layout (binding=1) uniform sampler2D h; // 用 于 高 度 图 


void main(void) 
{ // "p" 是 高 度 图 所 改变 的 顶点 位 置 
// 由 于 高 度 图 是 灰 度 图 ， 因 此 使 用 其 任何 颜色 分 量 
// 都 可 以 我们 使 用 "xr" )。 除 以 5.0 用 来 调整 高 度 
vec4 p = vec4(vertPos,1.0) + vec4( (vertNormal * ((texture(h, texCoord).r) / 5.0f)),1.0f ); 
tc = tex_coord; 
gl Position = proj matrix * mv_matrix * p; 


} 


图 10.14《〈 见 彩 插 ) 展示 了 通过 在 画图 程序 中 涂鸦 创建 的 简单 高 度 图 (左上 角 )。 高 度 图 
图 像 中 还 绘制 了 一 个 白色 矩形。 绿色 版 本 的 高 度 图 (左下 角 〉 用 作 纹 理 。 使 用 程序 10.4 中 
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展示 的 着 色 器 将 高 度 图 应 用 于 100X 100 的 矩形 网 格 模型 时 , 会 产生 类 似 “ 地 形 ” 的 感觉 (如 
图 10.14 右 图 所 示 )。 注 意 白 色 扼 形 是 如 何 生成 右边 的 惹 崖 的 。 





图 10.14 地 形 ， 在 顶点 着 色 器 中 进行 高 度 贴图 


图 10.14 展示 的 演 染 结果 还 算 可 以 ， 因 为 模型 〈 网 格 和 球体 ) 有 足够 数量 的 顶点 来 对 高 
度 贴 图 值 进行 采样 。 也 就 是 说 ， 模 型 具有 大 量 的 项 点， 而 高 度 图 相对 粗糙 并 且 以 低 分 辩 率 
充分 地 采样 。 然 而 ， 仔 细 观 察 仍然 会 发 现存 在 分 辩 率 伪 影 ， 例 如 沿 图 10.14 中 地 形 右 侧 凸 起 
的 矩形 盒子 的 左下 边缘 。 凸 起 的 矩形 盒子 两 侧 看 起 来 不 是 完美 矩形 ， 而 且 颜 色 有 渐变 效果 ， 
其 原因 是 底层 网 格 100 像素 X 100 像素 的 分 辩 率 无 法 与 高 度 图 中 的 白色 矩形 完全 对 齐 ,， 从 而 
导致 纹理 的 光栅 化 坐标 沿 侧面 产生 伪 影 。 

当 尝 试 将 其 应 用 于 要 求 更 严 苛 的 高 度 贴图 时 , 在 顶点 着 色 器 中 进行 高 度 贴图 的 限制 会 进 
一 步 暴 露 。 考虑 图 10.5 中 展示 的 月 球 图 像 。 法 线 贴图 在 捕获 图 像 细 节 方 面 表现 非常 出 色 (如 
图 10.9 和 图 10.11 所 示 ), 而 且 由 于 它 是 灰 度 图 , 因此 尝试 将 其 作为 高 度 图 应 用 似乎 很 自然 。 
但 是 ， 基 于 顶点 着 色 器 的 高 度 贴图 会 无 法 胜任 这 个 任务 ， 因 为 顶点 着 色 器 中 采样 的 顶点 数 
(即使 对 于 精度 =500 的 球体 ) 比 起 图 像 中 的 细节 级 别 ， 仍 然 太 少 。 相 较 之 下 ， 法 线 贴图 能 够 
很 好 地 捕获 细节 ， 因 为 在 片段 着 色 器 中 对 法 线 贴图 的 采样 是 像素 级 的 。 

我 们 将 会 在 之 后 的 第 12 章 继续 学 习 高 度 图 ， 在 那里 我 们 会 了 解 使 用 曲面 细 分 着 色 器 生 
成 大 量 顶 点 的 方法 。 


补充 说 明 


凹凸 贴图 或 法 线 贴图 的 一 个 基本 限制 是 , 虽然 它们 能 够 在 泻 染 对 象 的 内 部 提供 表面 细节 
的 外 观 ， 但 是 物体 轮廓 《外 边界 ) 无 法 显示 这 些 细节 【〈 它 保持 平滑 )。 高 度 贴图 在 用 于 实际 
修改 顶点 位 置 时 修复 了 这 个 缺陷 ， 但 它 也 有 其 自身 的 局 限 性 。 正 如 我 们 将 在 本 书后 面 看 到 
的 ， 有 时 可 以 使 用 几何 着 色 器 或 曲面 细 分 着 色 器 来 增加 顶点 的 数量 ， 使 高 度 贴图 更 加 实用 、 
有 效 。 

我 们 冒昧 地 简化 了 一 些 止 凸 贴图 和 法 线 贴 图 计算 。 在 重要 应 用 中 可 以 使 用 更 准确 和 /或 
EA HER RON, 
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第 11 章 ”参数 曲面 


在 20 世纪 50 年 代 和 60 年 代 在 雷诺 公司 工作 期 间 ， 皮 埃 尔 。 贝 塞 尔 (Pierre Bézier) FF 
发 了 用 于 设计 汽车 车 身 的 软件 系统 。 他 的 程序 利用 了 Paul de Casteljau 之 前 开发 的 数学 方程 
组 ， 后 者 曾 为 竞争 对 手 雪铁龙 汽车 制造 商 旺 POT YE. de Casteljau 方程 仅 使 用 几 个 标量 
参数 描述 曲线 ， 同 时 使 用 一 种 高 明 的 的 递归 算法 ， 称 为 “de Casteljau 算法 ”， 就 可 以 生成 任 
意 精 度 的 曲线 。 现 在 它们 分 别 被 称 为 “ 贝 塞 尔 曲线 ”和 “ 贝 塞 尔 曲 面 ”， 这 些 方法 通常 用 于 
高 效 地 对 各 种 曲面 3D 物体 进行 建 模 。 


11.1 =: N R/R H ék 


二 次 贝 塞 尔 曲线 由 一 组 参数 方程 定义 ,方程 组 中 使 用 3 个 控制 点 指定 特定 的 曲线 的 形状 ， 
每 个 控制 点 都 是 2D 空间 中 的 一 个 点 。" 考虑 图 11.1 中 所 示 的 一 组 3 Mpo po pl 

通过 引入 参数 t, 我 们 可 以 构建 一 个 用 来 定义 曲线 的 参数 方程 组 。! 表示 从 一 个 控制 点 到 
另 一 控制 点 间 线 段 距离 的 分 数 。 对 于 在 线段 上 的 点 ，t 的 值 在 [0...1] 的 范围 内 。 图 11.2 显示 
了 一 个 这 样 的 值 : t= 0.75， 分 别 应 用 于 连接 po-pi 和 pi-p2 的 线段 。 通 过 1 在 两 条 原始 线段 上 
定义 了 两 个 新 点 poi(D 和 piz(。 我 们 对 连接 两 个 新 点 pol(D 和 Piz(b 的 线段 重复 该 过 程 ， 产 生 
点 PLD， 其 中 沿线 段 pol(D 和 Piz(D 在 上 = 0.75 得 到 点 P(D。P(D 是 最 终 得 到 的 曲线 上 的 点 ， 因 
此 用 大 写字 母 己 表示 。 


pı 


Po 





图 11.1 贝 塞 尔 曲线 的 控制 点 图 11.2 参数 位 置 处 的 点 1= 0.75 


针对 各 种 t+ 值 收集 大 量 的 点 P(D)， 则 会 产生 一 条 曲线 ， 如 图 11.3 所 示 。 采 样 的 1 的 参数 
值 越 多 ， 生 成 的 点 P(D 越 多 ， 得 到 的 曲线 则 越 平滑 。 
现在 可 以 导出 二 次 贝 塞 尔 曲线 的 分 析 定 义 。 首 先 ， 我 们 注意 到 连接 两 个 点 ps 和 ps 的 线 
段 ps-ps 上 的 任意 点 p 可 以 用 参数 1 表示 如 下 : 
P(t)=tp, +(1-1)p, 


@ 当然， 曲线 可 以 存在 于 3D 空间 中 。 然 而 ， 二 次 曲线 完全 位 于 2D 平面 内 。 





i 
| 
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图 11.3 ”建立 二 次 贝 塞 尔 曲线 


使 用 该 等 式 ， 我 们 解 出 点 po 和 pin OIE popi 和 pop 上 的 点 ) 如 下 : 
Pat) = tp, + (1-1) Pp 
P(t) = tp, + (1 -Dp, 
同 理 ， 在 这 两 点 所 连接 的 线段 上 的 点 可 以 表示 为 : 
P(t) = tp, (t) + 1-1) py (t) 
替换 Pi2 和 Poi 的 定义 得 : 
P(t)=tltp, + (1 -Dp]+(1 -DL +(-O py] 
分 解 并 重新 合并 各 项 可 得 : 
P(t)=(1 -71) p, +(-2t +2t)p, +t p, 
或 
PO- FPA 
其 中 
B,(t)=(1-t)’ 
B,(t) =—20? + 2t 
BL@)=f 
因此 ,我 们 通过 控制 点 的 加 权 和 解 出 曲线 上 的 任意 点 。 加 权 函 数 B 通常 被 称 为 “混合 函 
数 ”( 尽 管 名 称 “B” 实 际 上 源 自 Sergei Bernstein 1， 他 首先 描述 了 这 个 多 项 式 族 )。 请 注 
意 ， 混 合 函 数 的 形式 都 是 二 次 的 ， 这 就 是 为 什么 得 到 的 曲线 称 为 二 次 贝 塞 尔 曲 线 。 


11.2 == TRI eK 


我 们 现在 将 曲线 模型 扩展 到 4 个 控制 点 ， 就 会 得 到 一 个 三 次 贝 塞 尔 曲线 ， 如 图 11.4 所 
示 。 与 二 次 曲线 相 比 ， 三 次 贝 塞 尔 曲线 能 够 定义 的 形状 更 加 丰富 ， 而 二 次 曲线 仅 限 于 定义 
MIB | 


178 第 11 章 参数 曲面 





图 11.4 建立 一 个 三 次 贝 塞 尔 曲线 


同 二 次 曲线 时 的 情形 ， 我 们 可 以 推导 出 三 次 贝 塞 尔 曲 线 的 解析 定义 : 
Palt) =tp + -1)po 
Pot) = tp, +(1-t)p, 
Pont) = tp; +(1-t)p, 
Pon) = tP) + -t) py 
P223(7) =P3()+0-O pr) 
曲线 上 的 点 则 是 : 
P(t) = Py (1) + I-D Py 

使 用 p1223 和 po1-12 的 定义 替换 等 式 中 的 项 ， 再 合并 得 : 

PO) =>). PB) 
其 中 : 

B,(t)=(1-ty 

B (t) =3t° —6t? +3t 

B, (t) = -3f +30 

B (=r 

演 染 贝 塞 尔 曲线 时 ， 可 以 使 用 许多 不 同 的 技术 。 其 中 一 种 方法 是 ， 使 用 固定 的 增 量 ， 在 
0.0~1.0 范围 内 ， 和 迭代 增加 得 出 t 的 后 继 值 。 例 如 ， 当 增 量 为 0.1 时 ， 我 们 可 以 使 用 上 值 为 
0.0、0.1、0.2、0.3 等 的 循环 。 对 于 t 的 每 个 值 ， 计 算 贝 塞 尔 曲 线 上 的 对 应 点 ， 并 绘制 连接 
连续 点 的 一 系列 线段 ， 如 图 11.5 中 的 算法 所 述 。 

另 一 种 方法 是 使 用 de Casteljau 算法 递归 地 将 曲线 对 半 细 分 ， 其 中 ， 在 每 个 递归 步骤 = 
1/2。 图 11.6 展示 了 左 侧 曲线 细 分 后 的 新 三 次 控制 点 (go，9g1，92，93)， 以 绿色 显示 〈 见 彩 
插 )。 该 算法 由 de Casteljau HEY (RHES LMS), 

算法 见 图 11.7。 该 算法 重复 将 曲线 段 细 分 为 两 半 的 过 程 ， 直 到 每 个 曲线 段 足 够 直 ， 进 一 
步 的 细 分 不 会 产生 实际 的 好 处 。 在 极限 情况 下 《〈 随 着 生成 的 控制 点 越 来 越 靠 近 )， 曲 线段 本 
身 实 际 上 与 第 一 个 控制 点 和 最 后 一 个 控制 点 (qo 和 qg) 之 间 的 线段 相同 。 因 此 ， 可 以 通过 
比较 从 第 一 控制 点 到 最 后 一 个 控制 点 的 距离 与 连接 4 个 控制 点 的 3 条 线段 的 长 度 之 和 来 确 


>. 
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定 曲线 段 是 否 “足够 直 ?” 
D, =| Po — Pi |+| Pi- Pal +1 Po — Ps | 
D, =| Py — P; | 


void drawBezierCurve (controlPointVector C) 
{ currentPoint = C[0]; / 曲线 从 第 一 个 控制 点 开始 
t= 0.0; 
while (t <= 1.0) 
{ ”WN 计算 混合 函数 在 t 时 对 控制 点 的 加 权 和 ， 
/作为 曲线 的 下 一 个 点 
nextPoint = (0,0) ; 
for (int i=0; i<=3; i++) 
nextPoint = nextPoint + (blending(i,t) * C[i]); 
drawLine (currentPoint,nextPoint); 
currentPoint = nextPoint; 
t=t+ increment; 


ae: 


double blending(int i, double t) 

{ switch (i) 
case 0: return ((1-t)*(4-t)*(1-t));  /⁄ (1-13 
case 1: return (3*t*(1-t)*(1-t)); 1 3t(1-t)2 
case 2: return (3*t*t*(1-t)); // 3t2(1-t) 
case 3: return (t*t*t); Mt 





图 11.5 AA DUBE AR HA IE NE 


P, 


q2 = (Potp1)/4 + 
(pi+pz)/4 


q1= (potp1)/2 —” 







em 
- 
-” 


qo = Po 


图 11.6 MIZNER h 


当 D1-D; 小 于 一 个 足够 小 的 阔 值 时 ， 进 一 步 的 细 分 就 没有 意义 了 。 

de Casteljau 算法 有 一 个 有 趣 的 特性 , 它 可 以 在 不 使 用 之 前 描述 的 混合 函数 的 情况 下 ， 生 
成 曲线 上 所 有 的 点 。 同 时 请 注意 ，p(1/2) 处 的 中 心 点 是 “共享 ”的 ， 即 它 既是 左 细 分 中 最 右 
的 控制 点 ， 也 是 右 细 分 中 最 左 的 控制 点 。 它 可 以 使 用 t= 1/2 处 的 混合 函数 或 使 用 由 de 
Casteljau 导出 的 公式 (gq + r1)/2 来 计算 。 

AER, Al 11.7 中 所 示 的 subdivide() 函 数 假 定 传 入 的 参数 p、g 和 + “SI” BR 
因此 ， 图 11.7 上 方 列 出 的 drawBezierCurve 函数 对 于 subdivide() 的 调用 ， 导 致 subdivide() Pi 
数 中 的 计算 修改 了 调用 中 所 传 的 实际 参数 。 
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drawBezierCurve(ControlPointVector C) 
{ if (Cis “straight enough”) 
draw line from first to last control point 
else 
{ subdivide(C, LeftC, RightC) 
drawBezierCurve(LeftC) 
drawBezierCurve(RightC) 


ae 


subdivide(ControlPointVector p, q, r) 
{ ”WN 计算 左 细 分 的 控制 点 
q(0) = p(0) 
q(1) = (p(0)+p(1)) / 2 
q(2) = (p(0)+p(1)) 1 4+ (p(1)+p(2)) 14 
// 计算 右 细 分 的 控制 点 
r(1) = (p(1)+p(2)) 1 4+ (p(2)+p(3))1 4 
r(2) = (p(2)+p(3))12 
r(3) = p(3) 
M4 t-0.5 时 ， 计算 “共享 "控制 点 
q(3) = r(0) = (q(2)+r(1)) 12 





图 11.7 贝 塞 尔 曲 线 的 递归 细 分 算法 


11.3 =x N RR E D 


贝 塞 尔 曲 线 定 义 了 曲线 (在 2D BK 3D 空间 
中 )， 而 贝 塞 尔 曲面 定义 了 3D 空间 中 的 曲面 。 
将 我 们 在 曲线 中 看 到 的 概念 扩展 到 曲面 , 需要 
将 参数 方程 组 中 的 参数 个 数 从 一 个 扩展 到 两 
个 。 对 于 贝 塞 尔 曲 线 ， 我 们 将 参数 称 为 to 对 
于 贝 塞 尔 曲 面 ， 我 们 将 参数 称 为 u 和 v。 曲 线 
由 点 P(D 组 成 ， 而 曲面 将 由 点 Plu, v) 组 成 ， 如 0 
图 11.8 所 示 。 

对 于 二 次 贝 塞 尔 曲面 ， 每 个 轴 x 和 v 上 有 
3 个 控制 点 ， 总 共 9 个 控制 点 。 图 11.9〈 见 彩 
插 ) 使 用 蓝 色 展示 了 一 组 共 9 个 控制 点 (通常 
称 为 控制 点 “网 格 ”) 的 示例 ， 以 及 相应 的 曲 
面 (红色 )。 

网 格 中 的 9 个 控制 点 标记 为 pj， 其 中 i 和 j 
分 别 代表 u Al 方向 上 的 索引 。 每 组 3 个 相 邻 
控制 点 (例如 (poo，po1，poz)) 会 定义 一 条 贝 
塞 尔 曲线 。 然 后 将 表面 上 的 点 Plu, y) 定 义 为 两 图 11.9 二 次 贝 塞 尔 控制 网 格 和 相应 的 表面 
个 混合 函数 的 和 ， 一 个 在 2 方向 ， 一 个 在 方向。 则 用 于 构建 贝 塞 尔 曲面 的 两 个 混合 函数 的 


点 Pu V) 
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形式 遵循 先前 为 贝 塞 尔 曲线 给 出 的 方法 : 

B,(u)=(1-u)? 

B (u) =—2u? + 2u 

B,(u) =u? 

B,(v) =(1- vy? 

B,(v) = -2v? + 2v 

B,(v) =v 

接 下 来 生成 构成 贝 塞 尔 曲面 的 点 P(u, v)。 对 于 每 个 控制 点 pp， 将 其 与 第 i 个 混合 函数 在 

u 处 的 值 相 乘 ， 再 与 第 7 个 混合 函数 在 v 处 的 值 相 乘 。 最 后 将 所 有 控制 点 的 结果 求 和 ， 生 成 
贝 塞 尔 曲 面 上 的 点 Plu, v): 


Plu, v=) 2, Pr * B(u)* B,(v) 


组 成 贝 塞 尔 曲面 的 生成 点 集 有 时 会 称 为 补丁 。 术 语 “ 补 本 ”有 时 会 让 人 感到 困惑 ， 我 们 
稍 后 在 研究 曲面 细 分 着 色 器 时 会 看 到 《〈 对 于 实际 实现 贝 塞 尔 曲面 非常 有 用 )。 因 为 通常 控制 
点 组 成 的 网 格 才 称 为 “补丁 ”。 


11.4 三 次 贝 塞 尔 曲面 


从 二 次 曲面 到 三 次 曲面 需要 使 用 更 大 的 网 格 一 一 4X4 而 非 3X3。 图 11.10〈 见 彩 插 ) 显 
ART 16 控制 点 网 格 〈 蓝 色 ) 和 相应 曲面 (红色 ) 的 示例 。 





11.10 三 次 贝 塞 尔 控 制 网 格 和 相应 的 曲面 


同上 ， 我 们 可 以 通过 组 合 三 次 贝 塞 尔 曲线 的 相关 混合 函数 来 推导 表面 上 的 点 Plu, v) 的 


AK: 


3” 
Plu, v)= > p, *B,(u)*B,(v) 


i=0 j=0 
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其 中 : 
B,(u) =(1-u)’ B,(v) =(1-v)’ 
B (u) = -3u° — 6u? +3u B (v) =-3v° -6v +3v 
B, (u) = —3u° + 3u’ B, (v) =-3v° +37 
B, (u) =u" B (v)=v° 
AR ER pe Tt a AAS E, 方法 是 交替 地 将 曲面 沿 每 个 维度 分 成 两 
半 ， 如 图 11.11 所 示 。 每 个 细 分 产生 4 个 新 的 控制 点 网 格 ， 每 个 网 格 包含 16 个 点 ， 这 些 点 
定义 了 曲面 的 一 个 象限 。 


2 


U High Te 


S U Low 
U Low 
V Low 


图 11.11 贝 塞 尔 曲 面 的 递归 细 分 


当 泻 染 贝 塞 尔 曲线 时 ， 我 们 在 曲线 “足够 直 ” 时 停止 细 分 。 而 对 于 贝 塞 尔 曲 面 ， 我 们 在 
曲面 “足够 平坦 ”时 停止 递归 。 一 种 实现 方法 是 ， 确 保 子 象限 控制 网 格 上 所 有 递归 生成 的 
点 ， 距 由 该 网 格 的 4 个 角 点 中 的 3 个 定义 的 平面 的 距离 ， 都 小 于 一 个 允许 的 范围 。 点 (x,y,z) 
与 平面 (4,B,C,D) 之 间 的 距离 4 为 : 





d= aie te] 


UAB? $C" 

如 果 d 小 于 某 个 足够 小 的 阔 值 ， 则 我 们 停止 细 分 过 程 ， 并 简单 地 使 用 子 象限 网 格 的 4 个 
角 的 控制 点 来 绘制 两 个 三 角形 。 

对 于 贝 塞 尔 曲线 ，OpenGL 管线 的 细 分 阶段 为 基于 图 11.5 中 的 迭代 算法 得 染 贝 塞 尔 曲 面 
提供 了 一 种 有 吸引 力 的 替代 方法 。 其 策略 是 让 曲面 细 分 生成 一 个 大 的 顶点 网 格 ， 然 后 使 用 
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混合 函数 将 这 些 顶 点 重新 定位 到 贝 塞 尔 曲面 上 ， 由 三 次 贝 塞 尔 控 制 点 指定 。 我 们 在 第 12 章 
中 实现 了 这 一 点 。 


补充 说 明 


本 章 重 点 介绍 参数 贝 塞 尔 曲线 和 曲面 的 数学 基础 。 我 们 推迟 了 在 OpenGL 中 呈现 其 中 任 
何 一 个 的 实现 ， 因 为 实现 它们 需要 适当 的 曲面 细 分 着 色 器 知识 作为 载体 ， 我 们 将 在 下 一 章 
中 进行 介绍 。 我 们 还 跳 过 了 一 些 推导 过 程 ， 例 如 递归 细 分 算法 。 

在 3D 图 形 中 ， 使 用 贝 塞 尔 曲线 建 模 对 象 有 许多 优点 。 首 先 ， 理 论 上 ， 这 些 物体 可 以 任 
意 缩放 ， 并 且 仍 然 保持 光滑 的 表面 而 不 “像素 化 ”。 其次， 许多 由 复杂 曲线 组 成 的 物体 可 以 
使 用 贝 塞 尔 控制 点 集合 进行 更 有 效 的 存储 ， 而 不 是 存储 数 千 个 顶点 。 

除 计算 机 图 形 和 汽车 外 ， 贝 塞 尔 曲线 还 有 许多 实际 应 用 。 在 桥梁 设计 中 也 可 以 找到 它们 
的 身影 ， 例 如 耶路撒冷 的 Chords Bridge 19。 类 似 的 技术 也 用 于 构建 TrueType 字体 ， 因 此 
可 以 将 其 缩放 到 任意 大 小 ， 或 者 将 视角 任意 拉 近 观看 ， 而 字体 边缘 始终 保持 平滑 。 


=) zh 
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11.1 SU DUGEAR ACARI Ee Mee M” R m” HHR. HE RRA —A h 
线 作为 例子 ， 该 曲线 既 不 以 完全 四 的 形式 ， 也 不 以 完全 凸 的 方式 弯曲 ， 因 此 无 法 通过 二 次 
贝 塞 尔 曲线 进行 近似 描述 。 

11.2 ”使 用 钢笔 或 铅笔 在 一 张 纸 上 绘制 一 组 任意 4 个 点 ， 按 任意 顺序 编号 为 1 一 4， 然 后 
尝试 大 致 绘制 一 条 由 这 4 个 有 序 控制 点 定义 的 三 次 贝 塞 尔 曲 线 。 接 着 重新 排列 控制 点 的 编 
号 (改变 它们 的 顺序 ， 但 不 改变 它们 的 位 置 ) 并 重新 绘制 新 产生 的 三 次 贝 塞 尔 曲 线 。 互 联 
网 上 有 许多 在 线 工具 可 以 用 于 绘制 贝 塞 尔 曲线 ， 你 可 以 使 用 它们 来 检验 你 绘制 的 曲线 。 


[AS14] E. Angel and D. Shreiner, Interactive Computer Graphics: A Top-Down Approach with WebGL, 7th ed. 
(Pearson, 2014). 

[BE16] S. Bernstein, Wikipedia, accessed October 2018. 
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第 12 章 曲面 细 分 


术语 Tessellation (HK) 是 指 一 大 类 设计 活动 ， 通 常 是 指 在 平坦 的 表面 上 ， 用 各 种 几何 
形状 的 瓷砖 相 邻 排列 以 形成 图 案 。 它 的 目的 可 以 是 艺术 性 的 或 实用 性 的 ， 很 多 例子 可 以 追 
溯 到 几 千 年 前 "19。 

在 3D 图 形 学 中 ，Tessellation 指 的 是 有 点 不 同 的 东西 (曲面 细 分 ), 但 显然 是 由 它 的 经 典 
SND RK) 启发 而 成 的 。 在 这 里 ， 曲 面 细 分 指 的 是 生成 并 且 操 控 大 量 三 角形 以 泻 染 复 
杂 的 形状 和 表面 ， 尤 其 是 使 用 硬件 进行 泻 染 。 曲 面 细 分 是 OpenGL 核心 近期 才 增加 的 新 功 
fÉ, TE 2010 年 的 4.0 版 本 中 出 现 。? 


12.1 OpenGL 中 的 曲面 细 分 


OpenGL 对 硬件 曲面 细 分 的 支持 ， 通 过 3 个 管线 阶段 提供 : 

C) 曲面 细 分 控制 着 色 器 ; 

(2) 曲面 细 分 器 ; 

(3) 曲面 细 分 评估 着 色 器 。 

第 (1) 和 第 G) 阶段 是 可 编程 的 ， 而 中 间 的 第 2 阶段 不 是 。 为 了 使 用 曲面 细 分 ， 
程序 员 通 常会 提供 控制 着 色 器 和 评估 着 色 器 。 

曲面 细 分 器 〈 其 全 名 是 曲面 细 分 图 元 生成 器 ， 或 TPG) 是 硬件 支持 的 引擎 ， 可 以 生成 固 
定 的 三 角形 网 格 。 控制 着 色 器 允许 我 们 配置 曲面 细 分 器 要 构建 什么 样 的 三 角形 网 格 。 然 后， 
评估 着 色 器 允许 我 们 以 各 种 方式 操控 网 格 。 然 后 ， 被 操控 过 的 三 角形 网 格 ， 会 作为 通过 管 
线 前 进 的 顶点 的 源 数据 。 回 想 一 下 图 2.2， 在 管线 上 ， 曲 面 细 分 着 色 器 位 于 顶点 着 色 器 和 几 
何 着 色 器 阶段 之 间 。 

让 我 们 从 一 个 简单 的 应 用 程序 开始 , 该 应 用 程序 只 使 用 曲面 细 分 器 创建 顶点 的 三 角形 网 
格 ， 然 后 在 不 进行 任何 操作 的 情况 下 显示 它 。 为 此 ， 我 们 需要 以 下 模块 。 

(1) C+HOpenGL 应 用 程序 : 

创建 一 个 摄像 机 和 相关 的 MVP FER, WE Cv) ALE (Cp) 矩阵 确定 摄像 机 朝向 ， 模 
型 Cm) 矩阵 可 用 于 修改 网 格 的 位 置 和 方向 。 

(2) 顶点 着 色 器 : 

在 这 个 例子 中 基本 上 什么 都 不 做 ， 顶 点 将 在 曲面 细 分 器 中 生成 。 

(3) 曲面 细 分 控制 着 色 器 : 


© GLU 工具 集 之 前 已 经 包含 了 一 个 名 为 gluTess 的 曲面 细 分 实用 程序 。2001 年 ，Radeon 发 布 了 第 一 款 带 有 曲面 细 分 支持 的 商 
用 图 形 卡 ， 但 很 少 有 工具 可 以 利用 它 。 
@ 或 线段 ， 但 我 们 将 专注 于 三 角形 。 
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指定 曲面 细 分 器 要 构建 的 网 格 。 

(4) 曲面 细 分 评估 着 色 器 : 

将 MVP 矩阵 应 用 于 网 格 中 的 顶点 。 

(5) 片段 着 色 器 : 

只 需 为 每 个 像素 输出 固定 颜色 。 

程序 12.1 显示 了 整个 应 用 程序 的 代码 。 即 使 像 这 样 的 简单 示例 也 相当 复杂 , 因此 许多 代 
码 元 素 都 需要 解释 。 请 注意 ， 这 是 我 们 第 一 次 使 用 除 项 点 和 片段 着 色 器 之 外 的 组 件 构 建 
GLSL 演 染 程序 。 因 此 ， 我 们 实现 了 createShaderProgram() 的 4 参数 重 载 版 本 。 


程序 12.1 基本 曲面 细 分 器 网 格 
C++ / OpenGL 应 用 程序 


GLuint createShaderProgram(const char *vp, const char *tCS, const char *tES, const char *fp) { 
string vertShaderStr = readShaderSource (vp) ; 
string tcShaderStr = readShaderSource(tCS) ; 
string teShaderStr = readShaderSource(tES) ; 
string fragShaderStr = readShaderSource (fp); 


const char *vertShaderSrc = vertShaderStr.c_str(); 
const char *tcShaderSrc = tcShaderStr.c_str(); 
const char *teShaderSrc = teShaderStr.c_str(); 
const char *fragShaderSrc = fragShaderStr.c_str(); 


GLuint vShader = glCreateShader (GL_VERTEX_SHADER) ; 

GLuint tcShader = glCreateShader(GL_TESS_CONTROL_ SHADER) ; 
GLuint teShader = glCreateShader (GL TESS EVALUATION SHADER) ; 
GLuint fShader = glCreateShader (GL FRAGMENT SHADER) ; 


glShaderSource(vShader, 1, &vertShaderSrc, NULL); 
glShaderSource(tcShader, 1, &tcShaderSrc, NULL); 
glShaderSource(teShader, 1, &teShaderSrc, NULL); 
glShaderSource(fShader, 1, &fragShaderSrc, NULL); 


glCompileShader (vShader) ; 
glCompileShader (tcShader) ; 
glCompileShader (teShader) ; 
glCompileShader (fShader) ; 


GLuint vtfprogram = glCreateProgram(); 
glAttachShader(vtfprogram, vShader) ; 
glAttachShader(vtfprogram, tcShader) ; 
glAttachShader(vtfprogram, teShader) ; 
glAttachShader(vtfprogram, fShader) ; 
glLinkProgram(vtfprogram) ; 
return vtfprogram; 

} 


void init (GLFWwindow* window) { 
renderingProgram = createShaderProgram("vertShader.glsl", 


"tessCShader.glsl", "tessEShader.glsl", "fragShader.glsl"); 


void display (GLFWwindow* window, double currentTime) { 
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glUseProgram(renderingProgram) ; 


glPatchParameteri(GL PATCH VERTICES, 1); 
glPolygonMode (GL _ FRONT AND BACK, GL LINE); 
glDrawArrays (GL PATCHES, 0, 1); 


顶点 着 色 器 

#version 430 

uniform mat4 mvp_matrix; 
void main(void) { } 


曲面 细 分 控制 着 色 器 

#version 430 

uniform mat4 mvp_matrix; 
layout (vertices = 1) out; 


void main(void) 

{ gl _TessLevelouter[0] = 6; 
gl_TessLevelouter[1] = 6; 
gl_TessLevelouter[2] = 6; 
gl_TessLevelouter[3] = 6; 
gl TessLevelInner[0] = 12; 
gl_TessLevelinner[1] = 12; 


曲面 细 分 评估 着 色 器 

#version 430 

uniform mat4 mvp matrix; 

layout (quads, equal spacing, ccw) in; 


void main (void) 
{ float u = gl_TessCoord.x; 

float v = gl _TessCoord.y; 

gl_Position = mvp matrix * vec4(u,0,v,1); 
} 


片段 着 色 器 

#version 430 

out vec4 color; 

uniform mat4 mvp matrix; 


void main(void) 


{ color = vec4(1.0, 1.0, 0.0, 1.0); // 黄色 
} 


得 到 的 输出 网 格 如 图 12.1 所 示 ( 见 彩 插 )。 





图 12.1 Tessellator 三 角形 网 格 输出 
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曲面 细 分 器 生成 由 两 个 参数 定义 的 顶点 网 格 : 内 层级 别 和 外 层级 别 。 在 这 种 情况 下 ， 
内 层级 别 为 12， 外 层级 别 为 6 一 一 网 格 的 外 边缘 被 分 为 6 段 ， 而 跨越 内 部 的 线 被 分 为 
12 By 

程序 12.1 中 的 特别 相关 的 新 结构 被 高 亮 显 示 。 让 我 们 首先 讨论 第 一 部 分 一 一 C++H/ 
OpenGL 代码 。 

编译 这 两 个 新 着 色 器 ， 跟 顶点 和 片段 着 色 器 完全 相同 。 然 后 将 它们 附加 到 同一 个 演 染 程 
序 , 并 且 链 接 调用 保持 不 变 。 唯 一 的 新 项 目 是 用 于 指定 要 实例 化 的 着 色 器 类 型 的 常量 一 一 新 
常量 如 下 : 

GL_TESS CONTROL SHADER 

GL_TESS_ EVALUATION SHADER 

请 注意 display0 函 数 中 的 新 项 目 。glDrawArraysO) 调 用 现在 指定 GL PATCHES。 当 使 用 
曲面 细 分 时 ， 从 C++/OpenGL 应 用 程序 发 送 到 管线 GIE VBO 中 ) 的 顶点 不 会 被 泻 染 ， 但 
通常 会 被 当 作 控 制 点 ， 就 像 我 们 在 贝 塞 尔 曲线 中 看 到 的 那些 一 样 。 一 组 控制 点 被 称 作 “ 补 
T”, 并 且 在 使 用 曲面 细 分 的 代码 段 中 ，GL PATCHES 是 唯一 允许 的 图 元 类 型 。 “补丁 ”中 
顶点 的 数量 在 glPatchParameteri() 的 调用 中 指定 。 在 这 个 特定 示例 中 ， 没 有 任何 控制 点 被 发 
送 ， 但 我 们 仍然 需要 指定 至 少 一 个 。 类 似 地 ， 在 glDrawArrays() 调 用 中 ， 我 们 指示 起 始 值 为 
0， 顶 点 数量 为 1， 即 使 我 们 实际 上 没有 从 C++ 程序 发 送 任何 顶点 。 

对 glPolygonMode0O 的 调用 指定 了 如 何 光 栅 化 网 格 。 默 认 值 为 GL_FILL。 而 我 们 的 代码 
中 显示 的 是 GL_LINE， 如 我 们 在 图 12.1 中 看 到 的 那样 ， 它 只 会 导致 连接 线 被 光栅 化 (因此 
我 们 可 以 看 到 由 曲面 细 分 器 生成 的 网 格 本 身 )。 如 果 我 们 将 该 行 代码 更 改 为 GL_FILL (或 将 
其 注释 掉 ， 从 而 使 用 默认 行为 GL_ FILL)， 我 们 将 得 到 如 图 12.2 所 示 的 版 本 。 





图 12.2 使 用 GL FILL 泻 染 的 细 分 网 格 


现在 让 我 们 来 过 一 遍 4 个 着 色 器 。 如 前 所 述 ， 顶 点 着 色 器 几乎 没什么 可 做 的 ， 因 为 
C++/OpenGL 应 用 程序 没有 提供 任何 顶点 。 它 包含 的 是 一 个 统一 变量 声明 ， 以 和 其 他 着 色 器 
相 匹配 ， 以 及 一 个 空 的 main()。 在 任何 情况 下 ， 所 有 着 色 器 程序 都 必须 包含 顶点 着 色 器 。 

曲面 细 分 控制 着 色 器 指定 曲面 细 分 器 要 生成 的 三 角形 网 格 的 拓扑 结构 。 通 过 将 值 分 配给 
名 为 gL_TessLevelxxx 的 保留 字 ， 设 置 6 个“ 级别 ”参数 一 一 两 个 “内 部 ”和 4 个 “外 部 ” 
级 别 。 我 们 这 里 细 分 了 一 个 由 三 角形 组 成 的 大 矩形 网 格 ， 称 为 四 边 形 。" 级 别 参数 告诉 曲面 


曲面 细 分 器 还 能 够 构建 由 三 角形 组 成 的 三 角形 网 格 ， 但 本 书 中 未 对 此 进行 介绍 。 
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细 分 器 在 形成 三 角形 时 如 何 细 分 网 格 ， 它 们 的 排列 如 图 12.3 所 示 。 
请 注意 控制 着 色 器 中 的 代码 行 : 人 oaa 


layout (vertices=1) out; 


这 与 之 前 的 GL PATCHES 讨论 有 关 ， 用 来 指定 从 
顶点 着 色 器 传递 给 控制 着 色 器 (以 及 “输出 ”给 评估 着 
色 器 ) 的 每 个 “补丁 ”的 顶点 数 。 在 我 们 现在 这 个 程序 
中 没有 任何 顶点 , 但 我 们 仍然 必须 指定 至 少 一 个 ， 因 为 
它 也 会 影响 控制 着 色 器 被 执行 的 次 数 。 稍 后 这 个 值 将 反 
映 控制 点 的 数量 , 并且 必须 与 CHHOpenGL 应 用 程序 中 一 一 外 部 级 别 1 一 > 
glPatchParameteri() 调 用 中 的 值 匹 配 。 图 12.3 细 分 级 别 

接 下 来 让 我 们 看 一 下 曲面 细 分 评估 着 色 器 。 它 以 一 行 代 码 开 头 ， 形 如 : 


< 一 一 外 部 级 别 0 一 一 > 





<— 外 部 级 别 2 一 一 > 


layout (quads, equal_spacing, ccw) in; 


乍 一 看 这 好 像 与 控件 着 色 器 中 的 “out” 布 局 语句 有 关 , 但 实际 上 它们 是 无 关 的 。 相反 ， 
这 行 代码 是 我 们 指示 曲面 细 分 器 去 生成 排列 在 一 个 大 和 矩形 (“四边形 ”) 中 顶点 的 位 置 。 它 
还 指定 了 细 分 线段 (包括 内 部 和 外 部 ) 具有 相等 的 长 度 〈 稍 后 我 们 将 看 到 长 度 不 等 的 细 分 
的 应 用 场景 )。“ccw” 参 数 指定 生成 曲面 细 分 网 格 顶 点 的 缠绕 顺序 〈 在 当前 情况 下 ， 是 逆 
时 针 )。 

然后 ， 由 曲面 细 分 器 生成 的 顶点 被 发 送 到 评估 着 色 器 。 因 此 ， 评 估 着 色 器 既 可 以 从 控制 
着 色 器 〈 通 常 作 为 控制 点 )， 又 可 以 从 曲面 细 分 器 〈 曲 面 细 分 网 格 ) 接收 顶点 。 在 程序 12.1 
中 ， 仅 从 曲面 细 分 器 接收 顶点 。 

评估 着 色 器 对 曲面 细 分 器 生成 的 每 个 顶点 执行 一 次 。 可 以 使 用 内 置 变量 gL_TessCoord ij 
问 项 点 位 置 。 曲 面 细 分 网 格 的 朝向 使 得 它 位 于 X-Z 平面 中 ， 因 此 gl TessCoord ff) XAI Y 4} 
量 被 应 用 于 网 格 的 对 和 Z 坐标。 网 格 坐标 ， 以 及 gl TessCoord 的 值 ， 范 围 为 0.0 一 1.0 (这 在 
计算 纹理 坐标 时 会 很 方便 )。 然 后 ， 评 估 着 色 器 使 用 MVP 和 矩阵 定向 每 个 顶点 (这 在 前 面 章 
节 的 示例 中 ， 是 由 顶点 着 色 器 完成 的 )。 

最 后 ， 片 段 着 色 器 只 为 每 个 像素 输出 一 个 恒定 的 黄色 。 当 然 ， 我 们 也 可 以 使 用 它 来 为 我 
们 的 场景 应 用 纹理 或 光照 ， 就 像 我 们 在 前 面 的 章节 中 看 到 的 那样 。 
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现在 让 我 们 扩展 我 们 的 程序 ， 使 它 将 我 们 简单 的 矩形 网 格 转换 为 贝 塞 尔 曲 面 。 细 分 网 格 
应 该 为 我 们 提供 了 足够 的 顶点 来 对 曲面 进行 采样 〈 如 果 我 们 想 要 更 多 的 话 ， 我 们 可 以 增加 
内 部 /外 部 细 分 级 别 )。 我们 现在 需要 的 是 通过 管线 发 送 控制 点 , 然后 使 用 这 些 控制 点 执行 计 
算 以 将 细 分 网 格 转换 为 我 们 所 需 的 贝 塞 尔 曲面 。 

假设 我 们 希望 建立 一 个 立方 体 贝 塞 尔 曲面 ,我 们 将 需要 16 个 控制 点 我 们 可 以 通过 VBO 
从 C++ 端 发 送 它们 ,或 者 我 们 可 以 在 顶点 着 色 器 中 硬 编码 写 死 它 们 。 图 12.4 概述 了 来 自 C++ 


EE ae 
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端的 控制 点 的 过 程 。 








曲面 细 分 评估 着 色 器 


SQ test 


细 分 顶点 位 置 


oe 


图 12.4 贝 塞 尔 曲面 的 曲面 细 分 概述 


现在 是 更 准确 地 解释 曲面 细 分 控制 着 色 器 CTCS) 如 何 工作 的 好 时 机 。 与 顶点 着 色 器 类 
似 ，TCS 对 每 个 传 入 顶点 执行 一 次 。 另 外 ， 回 想 一 下 第 2 章 ，OpenGL 提供 了 一 个 名 为 
gl VertexID 的 内 置 变量 ， 它 保存 一 个 计数 器 ， 指 示 顶 点 着 色 器 当前 正在 执行 哪 次 调用 。 曲 
面 细 分 控制 着 色 器 中 存在 一 个 类 似 的 内 置 变量 gl InvocationID. 

曲面 细 分 的 一 个 强大 功能 是 TCS (LAR TES) 着 色 器 可 以 同时 访问 数组 中 的 所 有 控制 
点 顶点 。 首 先 ， 当 每 个 调用 都 可 以 访问 所 有 顶点 时 ，TCS 对 每 个 顶点 执行 一 次 可 能 会 让 人 
感到 困惑 。 在 每 个 TCS 调用 中 ， 宛 余地 在 赋值 语句 中 指定 曲面 细 分 级 别 也 是 违反 直觉 的 。 
尽管 所 有 这 些 看 起 来 都 很 奇怪 ， 但 这 样 做 是 因为 曲面 细 分 的 架构 设计 使 得 TCS 调用 可 以 
并 行 运行 。 

OpenGL 提供 了 几 个 用 于 TCS 和 TES 着 色 器 的 内 置 变 量 。 我 们 已 经 提 到 过 的 是 
glL_InvocationID， 当 然 还 有 g]_TessLevelInner 和 gl TessLevelOuter。 以 下 是 一 些 最 有 用 的 内 
置 变量 的 更 多 细节 和 描述 。 

曲面 细 分 控制 着 色 器 〈TCS) 内 置 变量 。 

@ gl_in[] 一 一 包含 每 个 传 入 的 控制 点 顶点 的 数组 一 一 每 个 传 入 顶点 是 一 个 数组 元 素 。 

可 以 使 用 “.” 表 示 法 将 特定 顶点 属性 作为 字段 进行 访问 。 一 个 内 置 属性 是 gl 
Position 一 一 因此 ， 输 入 顶点 “i” 的 位 置 可 以 通过 gl]_in[i].gl_Position 访问 。 

@ gl out] ] 一 一 用 于 将 输出 控制 点 的 顶点 发 送 到 TES 的 一 个 数组 一 一 每 个 输出 顶点 是 
一 个 数组 元 素 。 可 以 使 用 “.” 表 示 法 将 特定 顶点 属性 作为 字段 进行 访问 。 一 个 内 
置 属性 是 g]_Position 一 一 因此 ， 输 出 顶点 “i” 的 位 置 可 以 通过 gl out[i].gl_ Position 
访问 。 
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@ gl InvocationID 一 一 整 型 ID 计数 器 ， 指 示 TCS 当前 正在 执行 哪个 调用 。 一 个 常见 


的 用 途 是 用 于 传递 顶点 属性 ; 例如， 将 当前 调用 的 顶点 位 置 从 TCS 传递 到 TES 可 
以 用 如 下 方式 完成 : gl_out[gl InvocationID].gl Position = gl in[gl InvocationID].gl_ 
Position 。 


曲面 细 分 评估 着 色 器 (TES) 内置 变 量 。 
@ gl in[] 一 一 包含 每 个 传 入 的 控制 点 顶点 的 数组 一 一 每 个 传 入 顶点 是 一 个 数组 元 素 。 





可 以 使 用 “.” 表 示 法 将 特定 顶点 属性 作为 字段 进行 访问 。 一 个 内 置 属性 是 gl 
Position 一 一 因此 ， 输 入 顶点 “i” 的 位 置 可 以 通过 g]_in[i].gl_Position 访问 。 
@ gl _Position 一 一 曲面 细 分 网 格 顶 点 的 输出 位 置 ， 可 能 在 TES 中 被 修改 。 重 要 的 是 要 


注意 gl Position 和 gl]_in[xxx].gl_Position 是 不 同 的 一 一 g]_Position 是 起 源 于 曲面 细 
分 器 的 输出 顶点 的 位 置 , 而 gl_in[xxx].gl Position 是 一 个 从 TCS 进入 TES 的 控制 点 
顶点 位 置 。 

值得 注意 的 是 ，TCS 中 的 输入 和 输出 控制 点 顶点 属性 是 数组 。 不 同 的 是 ，TES 中 的 输入 
控制 点 顶点 和 顶点 属性 是 数组 ， 但 输出 顶点 是 标量 。 此 外 ， 很 容易 混 涌 哪些 顶点 来 自 于 控 
制 点 ， 哪 些 顶 点 是 细 分 建立 的 ， 然 后 移动 以 形成 结果 曲面 。 总 而 言 之 ，TCS 的 所 有 顶点 输 
入 和 输出 都 是 控制 点 ， 而 在 TES P, glin ] 保 存 输入 控制 点 ，gL_ TessCoord 保存 输入 的 细 
DARK, gl Position 保存 用 于 泻 染 的 输出 表面 顶点 。 

我 们 的 曲面 细 分 控制 着 色 器 现在 有 两 个 任务 : 指定 曲面 细 分 级 别 并 将 控制 点 从 顶点 着 色 
器 传递 到 评估 着 色 器 。 然 后 , 评估 着 色 器 可 以 根据 贝 塞 尔 控制 点 修改 网 格 点 (gL_ TessCoords ) 
的 位 置 。 

程序 12.2 显示 了 所 有 4 个 着 色 器 一 一 顶点 、TCS、TES 和 片段 一 一 用 于 指定 控制 点 补丁 ， 
生成 平坦 的 曲面 细 分 顶点 网 格 ， 在 控制 点 指定 的 曲面 上 重新 定位 这 些 顶点 ， 并 使 用 纹理 图 
像 绘制 生成 的 曲面 。 它 还 显示 了 C++/OpenGL 应 用 程序 的 相关 部 分 , 特别 是 在 display0 函 数 
中 。 在 此 示例 中 , 控制 点 源 自 顶点 着 色 器 (它们 在 那里 硬 编码 写 死 ), 而 不 是 从 C++H/OpenGL 
应 用 程序 进入 OpenGL 管线 。 代 码 后 面 会 讲述 其 他 详细 信息 。 


程序 12.2 贝 塞 尔 曲 面 的 曲面 细 分 
顶点 着 色 器 





#version 430 

out vec2 texCoord; 

uniform mat4 mvp matrix; 

layout (binding = 0) uniform sampler2D tex color; 


void main (void) 
{ // 这 次 由 项 点 着 色 器 指定 和 发 送 控 制 点 


const vec4 vertices[ ] = 


vets il J (vec4(-1.0, 0.5, -LO 1.0), vee4(-0.5, 0.5, -1.0, 1 
werd 2005) NOS) ind iO Ol weedy he Oy -0 50-4004) 1 
Facd (-1207 Ou Oe lO areca (5025720070. 0 
veo4(0.5)):0..0)), 0.509110), weeael.i0;,.020,5-0.5 0 
Veca (a1. OF 0.0, 005 2 Ogu vc Om el 0), 
vecti- orm Oa eS OE Gt Oe J 


ta ie 


色 器 
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weo4(=15 0,-0.5, 212.0; 41.0), Ree0 Monn 
veod( 075), 003 La0r il Os 7 weed OL a re aay 


// 为 当前 顶点 计算 合适 的 纹理 坐标 ， 从 [-1. . .+1] 转 换 到 [0.. .1] 
texCoord = vec2((vertices[gl_VertexID].x + 1.0) / 2.0, (vertices[gl_VertexID].z + 1.0) / 2.0); 
gl Position = vertices[gl_ VertexID]; 

} 


曲面 细 分 控制 着 色 器 
#version 430 
in vec2 texCoord[ ]; 


out vec2 texCoord TCSout[ ]; // 以 标量 形式 从 顶点 着 色 器 传 来 的 纹理 坐标 输出 ， 以 数组 形式 被 接收 ， 然 后 被 发 送 给 评估 着 


uniform mat4 mvp_matrix; 
layout (binding = 0) uniform sampler2D tex_color; 
layout (vertices = 16) out; // 每 个 补丁 有 16 个 控制 点 


void main(void) 
{ int TL = 32; // 曲面 细 分 级 别 都 被 设置 为 这 个 值 
if (gl_InvocationID == 0) 
f gl_TessLevelOuter[0] = TL; gl_TessLevelOuter[2] = TL; 
gl_TessLevelOuter[1] = TL; gl_TessLevelOuter[3] = TL; 


gl_TessLevelInner[0] = TL; gl_TessLevelInner[1] TL; 
1 


// 将 纹理 和 控制 点 传递 给 TES 

texCoord TCSout[gl_InvocationID] = texCoord[gl_InvocationID]; 

gl_out[gl1_InvocationID] .gl Position = gl_in[{gl_InvocationID].gl_ Position; 
} 


曲面 细 分 评估 着 色 器 

#version 430 

layout (quads, equal spacing,ccw) in; 

uniform mat4 mvp_matrix; 

layout (binding = 0) uniform sampler2D tex_color; 

in vec2 texCoord TCSout[ ]; 

out vec2 texCoord TESout; // 以 标量 形式 传 来 的 纹理 坐标 数组 被 一 个 个 传 出 


void main (void) 

{ vec3 p00 = (gl_in[0].gl_Position) .xyz; 
vec3 p10 = (gl in[1] .gl Position) .xyz; 
vec3 p20 = (gl_in[2].gl_ Position) .xyz; 
vec3 p30 = (gl_in[3].gl_ Position) .xyz; 
vec3 p01 = (gl_in[4].gl_ Position) .xyz; 
vec3 p11 = (gl_in[5].gl Position) .xyz; 
vec3 p21 = (gl_in[6].gl_Position) .xyz; 
vec3 p31 = (gl_in[7].gl_Position) .xyz; 
vec3 p02 = (gl_in[8].gl_ Position) .xyz; 
vec3 pl2 = (gl_in[9].gl_ Position) .xyz; 
vec3 p22 = (gl_in[10].gl_ Position) .xyz; 
vec3 p32 = (gl_in[11].gl_Position) .xyz; 
vec3 p03 = (gl in{12].gl Position) .xyz; 
vec3 p13 = (gl in{13] .gl Position) .xyz; 
vec3 p23 = (gl_in[14].gl_ Position) .xyz; 
vec3 p33 = (gl_in[15].gl_Position) .xyz; 


float u = gl_TessCoord.x; 
float v = gl_TessCoord.y; 


// 立方 贝 塞 尔 基础 函数 


192 第 12 章 曲面 细 分 


float bu0 = (1.0-u) * (1.0-u) * (1.0-u); // (1-u)^3 
float! Balsa, tf 30(t=0)*2 
float bu2/2 310 iw) a tL Oa) // 3u*2(1-u) 
float! buss uns u wiu; // ur3 


float bvo = (1.0-v) * (1.0-v) * (1.0-v); // (1-v)*3 


float bvl = 3.0 * v * (1.0-v) * (1.0-v); // 3v(1-v)*2 
float bv2 = 3.0 * v * v * (1.0-v); // 3v*2(1-v) 
float bv3 = v * v * v; H nes 


// 输出 曲面 细 分 补丁 中 的 顶点 位 置 
vec3 outputPosition = 
bud * ( bv0*p00 + bvl*p01 + bv2*p02 + bv3*p03 ) 
+ bul * ( bv0*p10 + bv1l*p11 + bv2*p12 + bv3*p13 ) 
+ bu2 * ( bv0*p20 + bvl*p21 + bv2*p22 + bv3*p23 ) 
+ bu3 * ( bv0*p30 + bvl*p31 + bv2*p32 + bv3*p33 ); 
gl_Position = mvp matrix * vec4(outputPosition,1.0f); 


// 输出 插值 过 的 纹理 坐标 
vec2 tcl = mix(texCoord TCSout[0], texCoord TCSout[3], gl_TessCoord.x); 
vec2 tc2 = mix(texCoord TCSout[12], texCoord TCSout[15], gl_TessCoord.x) ; 
vec2 tc = mix(tc2, tcl, gl_TessCoord.y); 
texCoord TESout = tc; 

} 


片段 着 色 器 

#version 430 

in vec2 texCoord_TESout; 

out vec4 color; 

uniform mat4 mvp_matrix; 

layout (binding = 0) uniform sampler2D tex_color; 


void main(void) 

{ color = texture (tex color, texCoord TESout) ; 
} 

C++/OpenGL 应 用 程序 

// 这 次 我 们 也 传 入 一 个 纹理 以 用 来 绘制 表面 

// 像 往常 一 样 在 init O 里 加 载 纹理 ， 并 在 display () 里 启用 


void display (GLFWwindow* window, double currentTime) { 


glActiveTexture (GL_TEXTUREO) ; 
glBindTexture (GL TEXTURE 2D, textureID); 


glFrontFace (GL CCW); 


glPatchParameteri(GL_PATCH VERTICES, 16); // 每 个 补丁 的 顶点 数量 = 16 
glPolygonMode (GL_ FRONT AND BACK, GL FILL); 
glDrawArrays (GL_PATCHES, 0, 16); // 补丁 顶点 的 总 数量 ， 16 x 1 个 补丁 = 16 


} 


顶点 着 色 器 现在 指定 代表 特定 贝 塞 尔 曲面 的 16 个 控制 点 (“补丁 ”顶点 )。 在 这 个 例子 
中 ,它们 都 被 归 一 化 到 范围 [-1...+1]。 顶 点 着 色 器 还 使 用 控制 点 来 确定 适合 细 分 网 格 的 纹理 
坐标 ， 其 值 在 [0...1] 范 围 内 。 很 重要 的 是 ， 要 重申 顶点 着 色 器 输出 的 顶点 不 是 将 要 用 来 光栅 
化 的 顶点 , 而 是 贝 塞 尔 控 制 点 。 使 用 曲面 细 分 时 ,补丁 顶点 永远 不 会 被 光栅 化 一 一 只 有 曲面 
细 分 顶点 会 被 光栅 化 。 

控制 着 色 器 仍然 会 指定 内 部 和 外 部 曲面 细 分 级 别 。 它 现在 还 负责 将 控制 点 和 纹理 坐标 发 
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送 到 评估 着 色 器 。 请 注意 ， 曲 面 细 分 级 别 只 需要 指定 一 次 ， 因 此 该 步骤 仅 在 第 0 次 调用 期 
闻 完 成 〈 回 想 一 下 TCS 每 个 顶点 运行 一 次 ， 因 此 在 此 示例 中 有 16 次 调用 )。 为 方便 起 见 ， 
我 们 为 每 个 细 分 级 别 指定 了 32 个 细 分 。 

接 下 来 ， 评 估 着 色 器 执行 所 有 贝 塞 尔 曲面 计算 。main(0 开 头 的 大 块 赋值 语句 从 每 个 传 入 
gLin 的 gl Position 中 提取 控制 点 〈 请 注意 ， 这 些 控制 点 对 应 于 控制 着 色 器 的 gl out 变量 )。 
然后 使 用 来 自 曲面 细 分 器 的 网 格 点 计算 混合 函数 的 权重 ， 从 而 生成 一 个 新 的 outputPosition， 
然后 应 用 模型 -视图 -投影 矩阵 ， 为 每 个 网 格 点 生成 输出 gl Position 并 形成 贝 塞 尔 曲面 。 

另外 ， 还 需要 创建 纹理 坐标 。 顶 点 着 色 器 仅 为 每 个 控制 点 位 置 提 供 一 个 纹理 坐标 。 但 我 
们 并 不 是 要 演 染 控制 点 ， 我 们 最 终 需要 更 多 的 曲面 细 分 网 格 点 的 纹理 坐标 。 有 很 多 方法 可 
以 做 到 这 一 点 ， 在 这 里 我 们 利用 GLSL 方便 的 混合 功能 对 它们 进行 线性 插值 。mix0O 函 数 需 
要 3 个 参数 : (a) 起 始点 ; b) BARA; C) 内 插值 ， 范 围 为 0 一 1。 它 返回 与 内 插值 对 应 
的 起 点 和 终点 之 间 的 值 。 由 于 细 分 网 格 坐 
标的 范围 也 是 0 一 1， 所 以 它们 可 以 直接 用 
于 此 目的 。 

这 次 在 片段 着 色 器 中 , 不 再 是 输出 单一 
颜色 ， 而 是 应 用 标准 纹理 。 属 性 texCoord_ 
TESout 中 的 纹理 坐标 是 在 评估 着 色 器 中 生 
成 的 纹理 坐标 。 对 C++ 程序 的 更 改 同 样 很 
简单 一 一 请 注意 ， 现 在 指定 的 补丁 大 小 为 


16。 结 果 输 出 如 图 12.5 Bras CMA pls 
的 平 铺 纹理 )。 图 12.5 曲面 细 分 过 的 贝 塞 尔 曲面 
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回想 一 下 , 在 顶点 着 色 器 中 执行 高 度 贴 图 可 能 会 遇 到 顶点 数量 不 足以 用 来 泻 染 所 需 的 细 
节 的 情况 。 现 在 我 们 有 了 生成 大 量 顶 点 的 方法 ， 让 我 们 回 到 Hastings-Trew 的 月 球 表面 纹理 
贴图 中 259 并 将 其 用 作 高 度 贴图 ， 提 升 曲 面 细 分 顶点 来 生成 月 球 表面 细节 。 正 如 我 们 将 看 到 
的 ， 这 具有 一 些 优点 ， 可 以 让 顶点 的 几何 形状 更 好 地 匹配 月 亮 图 像 ， 并 且 提 升 轮廓 〈 边 缘 ) 
细节 。 

我 们 的 策略 是 修改 程序 12.1, 在 系 Z 平 面 中 放置 细 分 网 格 ， 并 使 用 高 度 贴图 来 设置 每 个 
细 分 网 格 点 的 了 坐标 。 要 做 到 这 一 点 ， 我 们 不 需要 补丁 ， 因 为 可 以 硬 编码 细 分 网 格 的 位 置 ， 
因此 我 们 将 在 glDrawArrays0 和 glPatchParameteri() 中 为 每 个 补丁 指定 所 需 的 最 少 的 1 个 顶 
点 ， 如 程序 12.1 中 所 做 的 那样 。Hastings-Trew 的 月 亮 纹理 图 像 既 用 于 颜色 ， 也 用 作 高 度 图 。 

我 们 通过 将 曲面 细 分 网 格 的 gl TessCoord 值 映射 到 顶点 和 纹理 的 适当 范围 , 在 评估 着 色 
器 中 生成 顶点 和 纹理 坐标 。 “评估 着 色 器 也 通过 添加 月 亮 纹理 的 一 小 部 分 颜色 分 量 到 输出 项 


@ 在 某 些 应 用 程序 中 ， 纹 理 坐 标 是 在 外 部 生成 的 ， 例 如 ， 在 使 用 曲面 细 分 为 导入 的 模型 提供 额外 项 点 时 。 在 这 种 情况 下 ， 需 
要 对 提供 的 纹理 坐标 进行 插值 。 
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点 的 了 分 量 ， 来 实现 高 度 贴图 。 着 色 器 的 更 改 显 示 在 程序 12.3 中 。 


程序 12.3 简单 的 地 形 曲面 细 分 
顶点 着 色 器 

#version 430 

uniform mat4 mvp matrix; 


layout (binding = 0) uniform sampler2D tex color; 
void main(void) { } 


曲面 细 分 控制 着 色 器 
二 // 这 个 应 用 程序 中 不 需要 控制 点 
void main(void) 


{ int TL=32; 
if (gl_InvocationID == 0 


{ gl_TessLevelouter[0] = TL; gl_TessLevelOuter[2] = TL; 
gl_TessLevelouter[1] = TL; gl_TessLevelOuter[3] = TL; 
gl_TessLevelInner[0] = TL; gl_TessLevelInner[1] = TL; 


} 
} | 


曲面 细 分 评估 着 色 器 


out vec2 tes_out; 
uniform mat4 mvp_matrix; | 
layout (binding = 0) uniform sampler2D tex color; | 


void main (void) 
// 将 曲面 细 分 网 格 顶 点 从 [0. . .1] 映 射 到 想 要 的 顶点 [-0.5...+0.5] 
vec4 tessellatedPoint = vec4(gl_TessCoord.x - 0.5, 0.0, gl_TessCoord.y - 0.5, 1.0); 


ann 


// 垂直 *\ 翻 转 ”Y 值 ， 以 将 曲面 细 分 网 格 顶 点 映射 到 纹理 坐标 
// 左上 顶点 坐标 是 (0,0)， 左 下 纹理 坐标 是 (0, 0) 
vec2 tc = vec2(gl_TessCoord.x, 1.0 - gl TessCoord.y); 


// 图 像 是 灰 度 图 ， 所 以 任何 一 个 颜色 分 量 (R、G 或 B) 都 可 以 作为 高 度 偏 移 量 
tessellatedPoint.y += (texture(tex color, tc).r) / 40.0; // 将 颜色 值 等 比例 缩小 应 用 于 Y 值 


// 将 高 度 贴图 提升 的 点 转换 到 视觉 空间 
gl_Position = mvp matrix * téssellatedPoint; 
tes_out = tc; 

} 


片段 着 色 器 
in vec? tes_out; 


out vec4 color; 
layout (binding = 0) uniform sampler2D tex_color; 


void main(void) 
{ color = texture(tex_color, tes out); 


} 


这 里 的 片段 着 色 器 类 似 于 程序 12.2 的 ， 只 是 根据 纹理 图 像 输出 颜色 。C++/OpenGL 应 用 
程序 基本 上 没有 变化 一 一 它 加 载 纹理 (用 作 纹 理 和 高 度 图 ) 并 为 其 启用 采样 器 。 图 12.6 显示 
了 纹理 图 像 〈 左 侧 ) 和 第 一 次 尝试 的 最 终 输 出 ， 遗 憾 的 是 ， 它 还 没有 实现 正确 的 高 度 贴 图 。 
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第 一 次 结果 存在 严重 缺陷 。 虽 然 我 们 现在 可 以 看 到 远 处 地 平 线 上 的 轮廓 细节 ， 但 是 那里 
的 凸 起 与 纹理 贴图 中 的 实际 细节 不 对 应 。 回 想 一 下 ， 在 高 度 图 中 ， 白 色 应 该 表示 “高 ” 而 
黑色 应 该 表示 “ 低 ”。 特 别 是 图 像 右 上 方 的 区 域 显示 的 大 山 丘 与 其 中 的 浅 色 和 深 色 无 关 。 

导致 此 问题 的 原因 是 细 分 网 格 的 分 辨 率 。 曲 面 细 分 器 可 以 生成 的 最 大 项 点数 取决 于 硬 
件 。 要 符合 OpenGL 标准 ， 唯 一 的 要 求 是 每 个 曲面 细 分 级 别 的 最 大 值 至 少 为 64。 我 们 的 程 
序 指定 了 一 个 内 部 和 外 部 曲面 细 分 级 别 均 为 32 的 单一 细 分 网 格 ， 因 此 我 们 生成 了 大 约 32X 
32 或 者 说 刚刚 超过 1 000 个 顶点 , 这 不 足以 准确 反映 图 像 中 的 细节 。 这 在 图 12.6 右上 方 〈 图 
中 放大 ) 尤其 明显 一 一 边缘 细节 仅 在 沿 地 平 线 的 32 个 点 处 采样 ， 这 会 产生 巨大 而 看 起 来 很 
随机 的 山 丘 。 即 使 我 们 将 曲面 细 分 值 增 加 到 64， 总 共 64X64 或 刚刚 超过 4 000 个 顶点 仍然 
不 足以 满足 使 用 月 球 图 像 进行 高 度 贴 图 的 需要 。 





ES 
Sak : 


图 12.6 细 分 地 形 一 一 首次 尝试 失败 ， 顶 点 数量 不 足 


增加 顶点 数量 的 一 个 好 方法 是 使 用 我 们 在 第 4 章 中 看 到 的 实例 化 。 我 们 的 策略 是 让 曲面 
细 分 器 生成 网 格 ， 并 使 用 实例 化 重复 数 次 。 在 顶点 着 色 器 中 ， 我 们 构建 了 一 个 由 4 个 顶点 
定义 的 补丁 ， 每 个 顶点 用 于 细 分 网 格 的 每 个 角 。 在 我 们 的 C+HOpenGL 应 用 程序 中 ， 我 们 
将 glIDrawArrays() 调 用 更 改 为 gIDrawArraysInstanced()。 如 此 ， 我 们 指定 一 个 64X64 个 补丁 
的 网 格 ， 每 个 补丁 包含 一 个 细 分 级 别 为 32 的 网 格 。 这 将 带 给 我 们 总 共 64X64X32X32 个 ， 
或 者 说 超过 400 万 个 顶点 。 

顶点 着 色 器 首先 指定 4 个 纹理 坐标 (0,0)、(0,1)、(1,0) 和 (1,1)。 使 用 实例 化 时 ， 请 回想 一 
下 ， 顶 点 着 色 器 可 以 访问 整数 变量 gl InstanceID， 它 包含 一 个 对 应 于 当前 正在 处 理 的 
glDrawArraysInstanced() 调 用 的 计数 器 。 我 们 使 用 此 ID 值 来 分 配 大 网 格 中 各 个 补丁 的 位 置 。 
补丁 位 于 行 和 列 中 ， 第 一 个 补丁 位 于 (0,0)， 第 二 个 位 于 (1,0)， 下 一 个 位 于 (2,0)， 依 此 类 推 ， 
第 一 列 中 的 最 后 一 个 补丁 在 (63,0)。 下 一 列 的 补丁 位 于 (0,1)、(1,1)， 依 此 类 推 ， 直 至 (63,1)。 
最 后 一 列 的 补丁 位 于 (0,63)、(1,63)， 依 此 类 推 ， 最 后 是 (63,63)。 给 定 补丁 的 下 坐标 是 实例 ID 
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整除 64， 了 坐标 是 实例 ID 除 以 64( 整 数 除法 )。 然 后 着 色 器 将 坐标 向 下 缩放 到 范围 [0...1]。 
控制 着 色 器 没有 更 改 ， 除 了 它 将 项 点 和 纹理 坐标 传递 下 去 。 

接 下 来 ,评估 着 色 器 获取 传 入 的 细 分 网 格 项 点 (由 gl TessCoord 指定 ) 并 将 它们 移动 到 
传 入 补丁 指定 的 坐标 范围 内 。 它 对 纹理 坐标 也 进行 一 样 的 处 理 ， 并 且 也 会 以 与 程序 12.3 中 
相同 的 方式 应 用 高 度 贴图 。 片 段 着 色 器 没有 修改 。 

每 个 组 件 的 更 改 显 示 在 程序 12.4 中 。 结 果 如 图 12.7 所 示 。 请 注意 ， 高 点 和 低 点 现在 更 
接近 于 图 像 的 亮 部 和 暗部 。 








图 12.7 细 分 地 形 一 一 第 二 次 尝试 ， 使 用 实例 化 


程序 12.4 ”实例 化 细 分 地 形 
C++/OpenGL 应 用 程序 
// 和 贝 塞 尔 曲面 例子 相同 ， 并 做 如 下 修改 


glPatchParameteri(GL PATCH VERTICES, 4); 
glDrawArraysInstanced(GL PATCHES, 0, 4, 64*64); 


顶点 着 色 器 
out vec2 tc; 


void main(void) ‘ 
{ vec2 patchTexCoords[ ] = vec2[ ] (vec2(0,0), vec2(1,0), vec2(0,1), vec2(1,1)); 


// 基于 当前 是 哪个 实例 计算 出 坐标 偏 移 量 
int x = gl InstanceID % 64; 
int y = gl_InstanceID / 64; 


// 纹理 坐标 被 分 配 进 64 个 补丁 中 ， 并 归 一 化 到 [0. .1] 。 翻 转轴 坐标 
tc = vec2( (x+patchTexCoords[gl VertexID] .x) / 64.0, (63 - y+patchTexCoords[gl_VertexID].y) / 64.0); 


// 顶点 位 置 和 纹理 坐标 相同 ， 只 是 它 的 取 值 范围 从 -0.5 到 +0.5 
gl Position = vec4(tc.x - 0.5, 0.0, (1.0 - te.y) - 0.5, 1.0); // 并 且 将 Y 轴 坐标 翻转 回来 


} 
曲面 细 分 控制 着 色 器 


layout (vertices = 4) out; 
in vec2 tc[ ]; 
out vec2 tcs_ out[ ]; 


VV 
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void main(void) 


{ // 曲面 细 分 级 别 的 指定 和 之 前 例子 中 相同 


tes out[gl InvocationID] = tc[gl_InvocationID]; 
gl_out[gl_InvocationID].gl Position = gl_in[gl_InvocationID].gl_ Position; 
} 


曲面 细 分 评估 着 色 器 


in vec2 tcs_out[ ]; 
out vec2 tes out; 
void main (void) 
{ // 将 纹理 坐标 映射 到 传 入 的 控制 点 指定 的 子 网 格 上 
vec2 tc = vec2(tcs out[0].x + (gl TessCoord.x) / 64.0, tcs_out[0].y + (1.0 - gl_TessCoord.y) / 64.0); 


// 将 细 分 网 格 映射 到 传 入 的 控制 点 指定 的 子 网 格 上 
vec4 tessellatedPoint = vec4(gl in[0].9g91 _ Position.x + gl_TessCoord.x / 64.0, 0.0, 
gl in[0].91 Position.z + gl_TessCoord.y / 64.0, 1.0); 


// 将 高 度 图 的 高 度 增加 给 顶点 
tessellatedPoint.y += (texture(tex_height, tc).r) / 40.0; 
gl_Position = mvp_matrix * tessellatedPoint; 
tes_out = tc; 
} 


现在 我 们 已 经 实现 了 高 度 贴 图 ， 我 们 可 以 着 手 改 进 它 并 整合 光照 。 一 个 挑战 是 我 们 的 项 
点 还 没有 与 它们 相关 的 法 向 量 。 男 一 个 挑战 是 简单 地 使 用 纹理 图 像 作为 高 度 图 产生 了 过 度 
“锯齿 状 ” 的 结果 一 一 在 这 种 情况 下 是 因为 并 非 纹 理 图 像 中 的 所 有 灰 度 变化 都 是 由 高 度 引 起 
的 。 对 于 这 个 特定 的 纹理 贴图 ，Hastings-Trew 已 经 生成 了 一 个 改进 的 高 度 贴图 ， 我 们 可 以 
EHTS, WE 12.8 左 图 所 示 。 

我 们 可 以 通过 生成 相 邻 顶点 《或 高 度 图 中 的 相 邻 纹 素 ) 的 高 度 ， 构 建 连接 它们 的 向 量 以 
及 使 用 又 积 来 计算 法 向 量 ， 以 动态 计算 和 创建 法 向 量 。 这 需要 一 些 细微 的 调整 ， 有 具体 取决 
于 场景 的 精度 〈《 和 /或 高 度 图 图 像 )。 在 这 里 ， 我 们 使 用 GIMP“normalmap” 插 件 'Ge"4 来 根据 
Hastings-Trew 的 高 度 图 生成 法 线 贴图 ， 如 图 12.8 右 图 所 示 。 








图 12.8 ”月球 表面 : SARTI (E) 和 法 线 贴图 ( 右 ) 


我 们 对 代码 进行 的 大 部 分 更 改 现在 只 是 为 了 实现 Phong 着 色 的 标准 方法 。 
@ C+/OpenGL 应 用 程序 。 


198 第 12 章 曲面 细 分 


我 们 加 载 并 激活 一 个 额外 的 纹理 来 保存 法 线 贴 图 ， 还 添加 了 代码 来 指定 光照 和 材质 ， 就 
像 我 们 在 以 前 的 应 用 程序 中 所 做 的 那样 。 

@ 顶点 着 色 器 。 

唯一 的 增补 是 光照 统一 变量 的 声明 和 法 线 贴 图 的 采样 器 。 通常 在 顶点 着 色 器 中 完成 的 光 
照 代 码 被 移动 到 曲面 细 分 评估 着 色 器 ， 因 为 直到 曲面 细 分 阶段 才 生 成 顶点 。 

o 曲面 细 分 控制 着 色 器 。 

唯一 的 增补 是 光照 统一 变量 的 声明 和 法 线 贴图 的 采样 器 。 

@ ”曲面 细 分 评估 着 色 器 。 

Phong 光照 的 准备 代码 现在 放 在 评估 着 色 器 中 : 

varyingVertPos = (mv matrix * position) .xyz; 

varyingLightDir = light.position - varyingVertPos; 

@ 片段 着 色 器 。 

这 里 完成 了 用 于 计算 Phong (或 Blinn-Phong) 照明 的 典型 代码 段 ， 以 及 从 法 线 贴 图 中 提 
取 法 向 量 的 代码 。 然 后 将 光照 结果 与 纹理 图 像 用 加 权 求 和 的 方式 结合 起 来 。 

带 有 高 度 和 法 线 贴图 以 及 Phong 照明 的 最 终结 果 如 图 12.9 所 示 。 地 形 现在 会 响应 光照 。 
在 此 示例 中 ， 位 置 光 已 放置 在 左 侧 图 像 中 心 的 左 侧 ， 右 侧 图 像 中 心 的 右 侧 。 





12.9 具有 法 线 贴图 和 光照 的 曲面 细 分 地 形 (光源 分 别 位 于 左 侧 和 右 侧 》 


尽管 从 静止 图 像 很 难 判 断 出 对 光 的 移动 的 响应 ， 但 是 读者 应 该 能 够 辨别 出 漫 射 光 的 变 
化 ， 并 且 山 峰 的 镜面 高 光 在 两 个 图 像 中 是 非常 不 同 的 。 当 摄像 机 或 光源 移动 时 ， 这 当然 会 
更 明显 。 结 果 仍 然 不 完美 ， 因 为 无 论 什么 样 的 光照 ， 输 出 中 包含 的 原始 纹理 都 包括 了 将 出 
现在 演 染 结果 上 的 阴影 。 


12.4 控制 细节 级 别 (LOD ) 


在 程序 12.4 P, 使 用 实例 化 来 实时 生成 数 百 万 个 项 点 , 即使 是 装备 精良 的 现代 计算 机 也 
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可 能 会 感受 到 负担 。 幸 运 的 是 ， 将 地 形 划 分 为 单独 的 补丁 的 策略 ， 正 如 我 们 为 增加 生成 的 
网 格 顶点 的 数量 所 做 的 那样 ， 也 为 我 们 提供 了 一 种 减少 负担 的 好 机 制 。 

在 生成 的 数 百 万 个 顶点 中 , 许多 顶点 不 是 必需 的 。 靠 近 摄 像 机 的 补丁 中 的 顶点 非常 重要 ， 
因为 我 们 希望 能 够 识别 附近 物体 的 细节 。 但 是 ， 补 丁 越 远 离 摄像 机 ， 甚 至 光栅 化 过 程 中 有 
足够 的 像素 来 体现 我 们 生成 的 顶点 数量 的 可 能 性 就 越 小 ! 

根据 距 摄 像 机 的 距离 更 改 补丁 中 的 顶点 数量 是 一 种 称 为 细节 级 别 或 LOD 的 技术 。Sellers 
等 人 描述 了 一 种 通过 修改 控制 着 色 器 来 控制 实例 化 曲面 细 分 中 的 LOD 的 方法 Sw51。 程序 12.5 
显示 了 Sellers 等 人 的 方法 的 简化 版 本 。 策 略 是 使 用 补丁 的 感知 大 小 来 确定 其 曲面 细 分 级 别 的 
值 。 由 于 补丁 的 细 分 网 格 最 终 将 放置 在 由 进入 控制 着 色 器 的 4 个 控制 点 定义 的 方 格 内 ， 我 们 
可 以 使 用 控制 点 相对 于 摄像 机 的 位 置 来 确定 应 该 为 补丁 生成 多 少 个 顶点 。 其 步骤 如 下 。 

(1) 通过 将 MVP 矩阵 应 用 于 4 个 控制 点 ， 计 算 它们 的 屏幕 位 置 。 

(2) 计算 由 控制 点 (在 屏幕 上 的 空间 中 ) 定义 的 正方 形 边 长 〈 即 宽度 和 高 度 )。 请 注意 ， 
即使 4 个 控制 点 形成 正方 形 ， 这 些 边 长 也 可 能 不 同 ， 因 为 应 用 了 透视 矩阵 。 

(3) 根据 曲面 细 分 级 别 所 需 的 精度 〈 基 于 高 度 图 中 的 细节 数量 )， 将 长 度 的 值 按 可 调整 
常数 进行 缩放 。 

(4) 将 缩放 长 度 值 加 1， 以 避免 将 曲面 细 分 级 别 指定 为 0〈 这 将 导致 不 生成 顶点 )。 

(5) 将 曲面 细 分 级 别 设置 为 相应 的 计算 宽度 和 高 度 值 。 

回想 一 下 ， 在 我 们 的 实例 中 ， 我 们 不 是 只 创建 一 个 网 格 ， 而 是 创建 64x64 个 网 格 。 
此 ， 对 每 个 补丁 执行 以 上 列表 中 的 5 个 步 又， 细节 级 别 因 补 丁 而 异 。 

所 有 更 改 都 在 控制 着 色 器 中 ， 并 显示 在 程序 12.5 中 ， 生 成 的 输出 如 图 12.10 所 示 。 请 注 
意 ， 变 量 gl_ InvocationID 指 的 是 正在 处 理 补丁 中 的 哪个 顶点 (而 不 是 正在 处 理 哪 个 补丁 )。 
因此 ， 告 诉 曲 面 细 分 器 在 每 个 补丁 中 生成 多 少 个 顶点 的 LOD 计算 发 生 在 每 个 补丁 的 第 0 个 
顶点 期 间 。 


程序 12.5 ”曲面 细 分 细节 级 别 ( LOD ) 
曲面 细 分 控制 着 色 器 


void main(void) 


{ float subdivisions = 16.0; // 基于 高 度 图 中 细节 密度 的 可 调整 的 常量 
if (gl_InvocationID == 0) 
{ vec4 p0 = mvp * gl_in[0].gl_ Position; // 屏幕 空间 中 控制 点 的 位 置 


vec4 pl = mvp * gl in[1].91 Position; 
vec4 p2 = mvp * gl_in[2].gl_ Position; 
pO = p0 / p0.w; 
pl = pl / pl.w; 
p2 = p2 / p2.w; 


float width = length(p2.xy - p0.xy) * subdivisions + 1.0; // 曲面 细 分 网 格 的 感知 "宽度 " 
float height = length(pl.xy - p0.xy) * subdivisions + 1.0; // 曲面 细 分 网 格 的 感知 "高 度 " 
gl_TessLevel0uter[0] = height; // 基于 感知 的 边 长 设置 曲面 细 分 级 别 


gl_TessLevelOuter[1] = width; 
gl_TessLevelOuter[2] = height; 
gl_TessLevelOuter[3] = width; 
gl_TessLeveliInner[0] = width; 
gl_TessLevelInner[1] = height; 

} 

// 。 像 以 前 一 样 将 纹理 坐标 和 控制 点 发 送 给 TES 
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tcs_out[gl_InvocationID] = tc[gl_InvocationID]; 
gl_out[gl_InvocationID].gl Position = gl_in[gl_InvocationID].gl_Position; 
} 


将 这 些 控制 着 色 器 的 更 改 应 用 于 图 12.7 中 我 们 场景 的 实例 化 〈 但 不 带 光 照 ) 版 本 ,并 将 
高 度 图 替换 为 Hastings-Trew 的 更 精细 调整 的 版 本 (如 图 12.8 所 示 )， 将 会 生成 改善 的 场景 ， 
带 有 更 逼真 的 地 平 线 细节 《如 图 12.10 所 示 )。 

在 此 示例 中 ， 更 改 评估 着 色 器 中 的 布局 说 明 符 也 很 有 用 : 


layout (quads, equal spacing) in; 
更 改 为 : 


layout (quads, fractional even spacing) in; 





图 12.10 具有 控制 细节 级 别 CLOD) 的 曲面 细 分 月 亮 


在 静止 图 像 中 难以 说 明 这 种 修改 的 原因 。 在 动画 场景 中 ， 当 曲面 细 分 对 象 在 3D 空间 中 
移动 时 ， 如 果 使 用 LOD， 有 时 可 以 在 对 象 表面 上 看 到 曲面 细 分 级 别 的 变化 ， 看 起 来 像 一 种 
叫 作 “弹出 ”的 摆动 伪 影 。 a ae 通过 使 相 邻 补丁 实例 的 网 格 几何 体 更 
相似 , 达成 了 即使 它们 的 细节 级 别 不 同 , 也 可 以 减少 此 影响 的 目的 。( 参 见习 题 12.2 和 12.3.) 

inode HORA A 画 时 ， 如 果 不 控 制 LOD， 场 景 可 能 会 
现 不 稳定 或 滞后 的 情况 。 

将 这 种 简单 的 LOD 技术 应 用 于 包含 Phong 着 色 的 版 本 〈 程 序 12.4) ARF. RA 
为 相 邻 补丁 实例 之 间 的 LOD 变化 反 过 来 会 导致 相关 法 向 量 的 突然 变化 ， 从 而 导致 光照 中 的 
弹出 伪 影 ! 与 以 往 一 样 ， 在 构建 复杂 的 3D 场景 时 需要 权衡 和 妥协 。 


补充 说 明 


将 曲面 细 分 与 LOD 组 合 在 实时 虚拟 现实 应 用 中 特别 有 用 ， 例 如 在 计算 机 游戏 中 ， 其 需 
eta Noah doi im eet ie 在 本 章 中 ， 我 们 已 经 说 
明了 曲面 细 分 和 LOD 用 于 实时 地 形 生成 的 应 用 场景 ， 尽 管 它 也 可 以 应 用 于 其 他 领域 ， 例 如 
a REER TAAL ain MTA AARE E 
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算 机 辅助 设计 应 用 程序 中 也 很 有 用 。 
Sellers 等 人 通过 消除 摄像 机 后 方 的 补丁 中 的 顶点 〈 他 们 通过 将 内 部 和 外 部 级 别 设 置 为 堆 
来 实现 这 一 点 ) BY， 进一步 扩展 了 LOD 技术 (在 程序 12.5 中 显示 )。 这 是 一 个 剔除 技术 
的 示例 ， 是 一 项 非常 有 用 的 技术 ， 因 为 实例 化 细 分 的 负载 仍然 可 以 在 系统 上 正常 运行 。 
程序 12.1 中 描述 的 createShaderProgram() 的 4 参数 版 本 被 添加 到 Utils.cpp 文件 中 。 稍 后 ， 
我 们 将 添加 其 他 版 本 以 适应 几何 着 色 器 阶段 。 


>) eR 


w 


12.1 修改 程序 12.1 以 试验 内 部 和 外 部 曲面 细 分 级 别 的 各 种 值 , 并 观察 生成 的 泻 染 网 格 。 

12.2 ”修改 程序 12.1， 将 评估 着 色 器 中 的 布局 说 明 符 从 equal_spacing EMAA fractional _ 
even_spacing， 如 第 12.4 节 所 述 。 观 察 对 生成 的 网 格 的 影响 。 

12.3 ”测试 程序 12.5， 将 评估 着 色 器 中 的 布局 说 明 符 设置 为 equal_spacing， 然 后 设置 为 
fractional even_spacing， 如 第 12.4 节 所 述 。 在 摄像 机 移动 时 观察 演 染 表面 上 的 效果 。 您 应 
该 能 够 在 第 一 种 情况 下 观察 弹出 伪 影 ， 这 在 第 二 种 情况 下 大 多 得 到 缓解 。 

124 (RA) 修改 程序 12.3 以 使 用 自己 设计 的 高 度 图 (可 以 使 用 之 前 在 习题 10.2 中 构 
建 的 高 度 图 )。 然 后 添加 光照 和 阴影 贴图 ， 以 便 细 分 地 形 投射 阴影 。 这 是 一 个 复杂 的 练习 ， 
因为 第 一 个 和 第 二 个 阴影 贴图 过 程 中 的 某 些 代码 需要 被 移动 到 评估 着 色 器 中 。 


[GP16] GIMP Plugin Registry, normalmap plugin, accessed October 2018. 

[HT16] J. Hastings-Trew, JHT’s Planetary Pixel Emporium, accessed October 2018. 

[LU16] F. Luna, Introduction to 3D Game Programming with DirectX 12, 2nd ed. (Mercury Learning, 2016). 

[SW15] G Sellers, R. Wright Jr., and N. Haemel, OpenGL SuperBible: Comprehensive Tutorial and Reference, 7th 
ed. (Addison-Wesley, 2015). 

[TS16] Tessellation, Wikipedia, accessed October 2018. 


第 13 章 几何 着 色 器 


在 OpenGL 管线 中 ， 紧 跟着 曲面 细 分 阶段 的 是 几何 阶段 。 在 这 一 阶段 中 ， 程 序 员 可 以 选 
择 包含 几何 着 色 器 。 这 个 阶段 实际 上 在 曲面 细 分 阶段 出 现 之 前 就 已 经 存在 ， 它 在 3.2 版 本 
(2009 年 ) 成 为 OpenGL 核心 的 一 部 分 。 

与 曲面 细 分 一 样 ， 几 何 着 色 器 使 程序 员 能 够 以 顶点 着 色 器 中 无 法 实现 的 方式 操纵 顶点 
组 。 在 某 些 情况 下 ， 可 以 使 用 曲面 细 分 着 色 器 或 者 几何 着 色 器 完成 同样 的 任务 ， 因 为 它们 
的 功能 在 某 些 方面 重 倒 。 


13.1 OpenGL 中 的 延 个 图 元 处 理 


几何 着 色 器 阶段 位 于 曲面 细 分 和 光栅 化 之 间 ， 位 于 用 于 图 元 处 理 的 管线 段 内 〈 见 图 2.2). 
顶点 着 色 器 允许 一 次 操作 一 个 顶点 ， 而 片段 着 色 器 一 次 可 以 操作 一 个 片段 (实际 上 是 一 个 像 
素 )， 但 几何 着 色 器 却 可 以 一 次 操作 一 个 图 元 。 

回想 一 下 ， 图 元 是 OpenGL 中 绘制 对 象 的 基本 元 件 。 只 有 少数 几 种 类 型 的 图 元 ; 我 们 将 
主要 关注 操纵 三 角形 图 元 的 几何 着 色 器 。 因 此 ， 当 我 们 说 几何 着 色 器 可 以 一 次 操作 一 个 图 
元 时 ， 我 们 通常 意味 着 着 色 器 一 次 可 以 访问 三 角形 的 3 个 顶点 。 几 何 着 色 器 允许 一 次 性 访 
问 图 元 中 的 所 有 顶点 ， 然 后: 

o 输出 相同 的 图 元 保持 不 变 ; 

o 输出 修改 了 顶点 位 置 的 相同 类 型 图 元 ; 

o 输出 不 同类 型 的 图 元 ; 

o 输出 更 多 的 其 他 图 元 ; 

@ 删除 图 元 〈 根 本 不 输出 )。 

与 曲面 细 分 评 佑 着 色 器 类 似 ， 可 以 在 几何 着 色 器 中 将 传 入 的 顶点 属性 作为 数组 进行 访 
问 。 但 是 ， 在 几何 着 色 器 中 ， 传 入 属性 数组 仅 索引 到 图 元 尺寸 那么 大 。 例 如 ， 如 果 图 元 是 
三 角形 ， 则 可 用 索引 为 0、1、2。 使 用 预先 定义 的 数组 gl in 访问 顶点 数据 本 身 ， 如 下 所 示 。 


gl_in[2].gl_Position // 第 三 个 顶点 的 位 置 


与 曲面 细 分 评估 着 色 器 类 似 ， 几 何 着 色 器 输出 的 顶点 属性 都 是 标量 。 也 就 是 说 ， 输 出 是 
形成 图 元 的 各 个 顶点 (它们 的 位 置 和 其 他 属性 变量 ， 如 果 有 的 话 〉 的 流 。 

有 一 个 布局 修饰 符 用 于 设置 图 元 输入 /输出 类 型 和 输出 大 小 。 特 殊 的 GLSL 命令 
EmitVertex() 指 定 了 将 要 输出 一 个 顶点 。 特 殊 的 GLSL 命令 EndPrimitive() 表 示 一 个 特定 的 图 
元 构建 完成 。 

有 一 个 内 置 变量 gL_PrimitiveIDIn， 它 保存 当前 图 元 的 ID。ID 从 0 开始 ， 并 计数 到 图 元 
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总 数 减 1。 
我 们 将 探讨 四 种 常见 的 操作 类 型 
@ 修改 图 元 ; 
@ 删除 图 元 ; 
@ 添加 图 元 ; 
@ 更 改 图 元 类 型 。 


13.2 RWT 


当 通 过 对 图 元 〈 通 常 为 三 角形 ) 的 单独 更 改 就 可 以 影响 对 象形 状 的 改变 时 ， 使 用 几何 着 
色 器 就 很 方便 。 

例如 ,考虑 我 们 之 前 在 图 7.12 中 呈现 的 环 面 。 假 设 环 面 代表 内 部 的 空间 〈 例 如 当 表 示 轮 
台 时 )， 而 我 们 想 要 给 它 “ 充 气 ”。 简 单 地 在 C++/OpenGL 代码 中 应 用 比例 缩放 因子 将 无 法 
实现 这 一 点 ， 因 为 它 的 基本 形状 不 会 改变 。 想 要 让 其 显示 出 “充气 ”的 外 观 ， 还 需要 在 环 
面 伸 入 空 的 中 心 空间 时 使 内 孔 变 小 。 

解决 这 个 问题 的 一 种 方法 是 将 表面 法 向 量 添加 到 每 个 顶点 。 虽然 这 可 以 在 顶点 着 色 器 中 
完成 ， 但 是 我 们 在 几何 着 色 器 中 进行 练习 。 程 序 13.1 显示 了 GLSL 几何 着 色 器 的 代码 。 其 
他 模块 与 程序 7.3 相同 ， 只 有 一 些小 改动 : 片段 着 色 器 输入 名 称 现在 需要 反映 几何 着 色 器 的 
输出 (例如 ，varyingNormal 变 为 varyingNormalG )，C++/OpenGL 应 用 程序 需要 编译 几何 着 
色 器 并 在 链接 之 前 将 其 附加 到 着 色 器 程序 。 新 着 色 器 被 指定 为 几何 着 色 器 ， 如 下 所 示 。 


GLuint gShader = glCreateShader (GL GEOMETRY SHADER); 


程序 13.1 几何 着 色 器 : 修改 顶点 


#version 430 
layout (triangles) in; 


in vec3 varyingNormal[ ]; // 来 自 项 点 着 色 器 的 输入 
in vec3 varyingLightDir[ ]; 
in vec3 varyingHalfVector[ ]; 


out vec3 varyingNormalG; // 输出 给 光栅 着 色 器 然后 到 片段 着 色 器 
out vec3 varyingLightDirG; 
out vec3 varyingHalfVectorG; 


layout (triangle strip, max_vertices=3) out; 
// 和 矩阵 和 光照 统一 变量 和 以 前 一 样 


void main (void) 
{ // 沿 着 法 向 量 移动 顶点 ， 并 将 其 他 顶点 属性 原样 传递 
for (int i=0; i<3; i++) 
{ gl Position = proj matrix * 
gl_in[i].gl_ Position + normalize(vec4(varyingNormal[i],1.0)) * 0.4; 
varyingNormalG = varyingNormal [i]; 
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varyingLightDirG = varyingLightDir[i]; 
varyingHalfVectorG = varyingHalfVector[i]; 
EmitVertex(); 

} 

EndPrimitive(); 


} 


在 程序 13.1 中 需要 注意 , 与 顶点 着 色 器 的 输出 变量 对 应 的 输入 变量 被 声明 为 数组 。 这 为 
程序 员 提 供 了 一 种 机 制 ， 可 以 使 用 索引 0、1 和 2 访问 三 角形 图 元 中 的 每 个 顶点 及 其 属性 。 
我 们 希望 沿 着 它们 的 表面 法 向 量 向 外 移动 
这 些 顶 点 。 在 顶点 着 色 器 中 ， 顶 点 和 法 问 
量 都 已 经 被 转换 到 视图 空间 。 我 们 为 每 个 
传 入 的 顶点 位 置 (gl_in[i].gl Position) 添 
加 法 向 量 的 一 小 部 分 ， 然 后 将 投影 矩阵 应 
用 于 结果 ， 生 成 每 个 输出 gl Position. 

值得 注意 的 是 ， 使 用 GLSL 调用 
EmitVertex() 来 指定 我 们 何 时 完成 了 计算 
输出 gl Position 及 其 相关 的 项 点 属性 并 准 
备 输出 顶点 。EndPrimitive() 调 用 指定 我 们 
已 经 完成 了 组 成 图 元 (在 本 例 中 为 三 角形 》 图 13.1 “充气 ”的 环 面 ， 顶 点 由 几何 着 色 器 修改 
的 一 组 顶点 的 定义 。 结 果 如 图 13.1 所 示 。 

几何 着 色 器 包括 两 个 布局 限定 符 。 第 一 个 指定 输入 图 元 类 型 ， 并 且 必 须 与 C++ 端 
glDrawArrays(0) 或 glDrawElementsO) 调 用 中 的 图 元 类 型 兼容 。 选 项 如 表 13.1 所 示 。 








表 13.1 图 元 输入 类 型 的 选项 











几何 着 色 器 输入 图 元 类 型 


points 


与 glIDrawArrays() 调 用 兼容 的 图 元 类 型 每 次 调用 项 点 的 数量 
GL POINTS 1 
GL_LINES, GL_LINE_STRIP 2 


GL_LINES_ADJACENCY, 














lines 











lines_adjacency 4 
GL_LINE_STRIP_ADJACENCY 
GL_TRIANGLES, GL_TRIANGLE STRIP, 
triangles ; 3 
GL_TRIANGLE_FAN 
CL_TRJANGLES_ ADJACENCY, 
triangles_adjacency 6 





GL_TRIANGLE_STRIP_ADJACENCY 


各 种 OpenGL 图 元 类 型 (包括 “strip” 和 “fan” 类 型 ) 在 第 4 章 中 讲 过 。“ 相 邻 ” 类 型 
在 OpenGL 中 用 来 与 几何 着 色 器 一 起 使 用 ， 并 且 它 们 可 以 访问 与 图 元 相 邻 的 顶点。 我 们 在 
本 书 中 不 使 用 它们 ， 但 为 了 完整 性 ， 依 然 列 出 它们 。 

输出 图 元 类 型 必须 是 points、line strip 或 triangle _strip。 请 注意 ， 输 出 布局 限定 符 也 会 
指定 着 色 器 在 每 次 调用 中 输出 的 最 大 项 点数 。 

在 顶点 着 色 器 中 可 以 更 容易 地 对 环 面 进行 这 种 特定 的 改变 。 然 而 ， 假 设 不 是 沿 着 自己 的 
表面 法 向 量 向 外 移动 每 个 顶点 ， 而 是 希望 将 每 个 三 角形 沿 其 表面 法 向 量 向 外 移动 ， 实 际 上 
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是 将 环 面 的 组 成 三 角形 向 外 “爆炸 ” 顶点 着 色 器 做 不 到 这 一 点 ， 因 为 计算 三 角形 的 法 向 量 
需要 对 3 个 三 角形 顶点 的 顶点 法 向 量 进行 平均 ， 并 且 顶 点 着 色 器 一 次 只 能 访问 三 角形 中 一 
个 顶点 的 顶点 属性 。 但 是 ， 我 们 可 以 在 几何 着 色 器 中 执行 此 操作 ， 因 为 几何 着 色 器 可 以 访 
问 每 个 三 角形 中 的 所 有 3 个 顶点 。 我 们 平均 它们 的 法 向 量 来 计算 三 角形 的 曲面 法 向 量 ， 然 
后 将 该 平均 法 向 量 加 给 三 角形 图 元 中 的 每 个 顶点 。 图 13.2、 图 13.3 和 图 13.4 分 别 显 示 了 曲 
面 法 向 量 的 平均 值 、 修 改 后 的 几何 着 色 器 main0 代 码 和 输出 的 结果 。 


原 法 向 量 : 取 平 均值 : 





图 13.2 ”将 平均 三 角形 曲面 法 向 量 应 用 于 三 角形 顶点 





void main (void) 
{ WW 对 三 角形 3 个 顶点 法 向 量 取 平均 值 ， 得 到 三 角形 的 曲面 法 向 量 
vec4triangleNormal = 
vec4(((varyingNormal[0] + varyingNormal[1] + varyingNormal[2]) / 3.0),1.0); 
U 将 三 个 点 都 沿 所 得 法 向 量 移动 
for (i=0; i<3; i++) 
{  gl_Position = proj_matrix * (gl_in[i].gl_Position + normalize(triangleNormal) * 0.4); 
varyingNormalG = varyingNormal[i]; 
varyingLightDirG = varyingLightDir[i]; 
varyingHalfVectorG = varyingHalfVector{i]; 
EmitVertex(); 
} 
EndPrimitive(); 











图 13.3 修改 了 几何 着 色 器 ， 用 于 “爆炸 ” 环 面 





图 13.4 “爆炸 ”的 环 面 
通过 确保 环 面 的 内 部 也 是 可 见 的 (通常 这 些 三 角形 会 被 OpenGL 剔除 ， 因 为 它们 是 “ 背 
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面 27， 可 以 改善 “爆炸 ” 环 面 的 外 观 。 一 种 解决 方式 是 使 环 面 被 泻 染 两 次 ， 一 次 以 正常 方 
式 进行 ， 一 次 使 缠绕 顺序 反 转 (使 缠绕 顺序 反 转 实际 上 相当 于 切换 哪些 面 朝向 前 方 ， 哪 些 
面 朝向 后 方 )。 我 们 还 向 着 色 器 (通过 统一 变量 ) 发 送 一 个 标志 ， 以 禁用 背 向 三 角形 上 的 漫 
反射 和 镜面 光 ， 以 使 它们 不 那么 突出 。 代 码 的 更 改 如 下 。 

对 display0) 函 数 的 修改 : 


// 绘制 前 向 三 角形 一 -启用 光照 

glUniformli (lLoc, 1); // 用 来 启用 、 禁 用 漫 反 射 、 镜 面 光 组 件 的 统一 变量 的 位 置 
glFrontFace (GL CCW); 

glDrawElements(GL_TRIANGLES, numTorusIndices, GL UNSIGNED INT, 0); 


// 绘制 后 向 三 角形 一 禁用 光照 

glUniformli(lLoc, 0); 

glFrontFace (GL CW); 

glDrawElements(GL TRIANGLES, numTorusIndices, GL UNSIGNED INT, 0); 


对 片段 着 色 器 的 修改 : 

if (enableLighting == 1) 

{ £ragColor = // 当 泻 染 前 向 表面 时 ， 使 用 正常 的 光照 计算 
} 

else // 当 泻 染 后 向 表面 时 ， 只 启用 环境 光照 组 件 


{ fragColor = globalAmbient * material.ambient + light.ambient * material.ambient; 
} 


由 此 产生 的 “爆炸 ” 环 面 ， 包 括 背 面 ， 如 图 13.5 Aras. 





图 13.5 “爆炸 ”的 环 面 ， 包 括 背 面 


13.3” 山 除 图 元 


几何 着 色 器 的 一 个 常见 用 途 是 通过 合理 地 删除 一 些 图 元 来 从 简单 的 对 象 构建 丰富 的 装 
饰 对 象 。 例 如 ， 从 我 们 的 环 面 中 移 除 一 些 三 角形 可 以 将 其 变 成 一 种 复杂 的 格子 结构 ， 而 从 
零 开 始 建 模 这 个 结构 是 更 加 困难 的 。 执 行 此 操作 的 几何 着 色 器 显示 在 程序 13.2 中 ， 输 出 如 
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图 13.6 所 示 。 





图 13.6 ”几何 着 色 器 : 删除 图 元 
程序 13.2 ”几何 着 色 器 : 删除 图 元 








// 输入 、 输 出 和 统一 变量 和 以 前 一 样 


void main (void) 
{ if (‘mod(gl PrimitiveIDIn,3) != 0 ) 
{ for (int i=0; i<3; i++) 

{ gl Position = proj matrix * gl in[i].gl Position; 
varyingNormalG = varyingNormal [i]; 
varyingLightDirG = varyingLightDir[i]; 
varyingHalfVectorG = varyingHalfVector [i]; 
EmitVertex (); 

} 

} 
EndPrimitive(); 


} 

不 需要 对 代码 进行 其 他 更 改 。 请 注意 这 里 使 用 了 mod 函数 一 一 所 有 顶点 , 除了 每 3 个 图 
元 中 的 第 一 个 图 元 的 顶点 被 忽略 之 外 ， 都 被 传递 。 在 这 里 ， 泻 染 背 向 三 角形 也 可 以 提高 真 
实感 ， 如 图 13.7 所 示 。 





图 13.7 显示 背面 的 图 元 删除 


13.4 ”添加 图 元 


也 许 几何 着 色 器 最 有 趣 和 最 有 用 的 用 途 是 为 正在 浑 染 的 模型 添加 额外 的 顶点 和 /或 图 
元 。 这 使 得 可 以 进行 诸如 增加 对 象 中 的 细节 以 改善 高 度 贴图 ， 或 者 完全 改变 对 象 的 形状 之 
类 的 事情 。 
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考虑 以 下 示例 ， 我 们 将 环 面 中 的 每 个 三 角形 更 改 为 一 个 微小 的 三 角形 金字 塔 。 

我 们 的 策略 类 似 于 我 们 之 前 的 “爆炸 ” 环 面 示例 ， 如 图 13.8 所 示 。 传 入 三 角形 图 元 的 顶 
点 用 于 定义 金字 塔 的 基 座 。 金 字 塔 的 壁 由 那些 顶点 和 通过 平均 原始 顶点 的 法 向 量 计算 的 新 
点 〈 称 为 “尖峰 点 ”) 构成 。 然 后 通过 从 尖峰 点 到 基 座 的 两 个 向 量 的 又 积 计 算 金字 塔 的 3 个 
“ 边 ” 中 的 每 一 个 的 新 法 向 量 。 


计算 新 法 向 量 





图 13.8 将 三 角形 转换 为 金字 塔 


程序 13.3 中 的 几何 着 色 器 为 环 面 中 的 每 个 三 角形 图 元 执行 此 操作 。 对 于 每 个 输入 三 角 
形 ， 它 输出 3 个 三 角形 图 元 ， 总 共 9 个 顶点 。 每 个 新 三 角形 都 在 函数 makeNewTriangle() 中 
构建 ， 该 函数 被 调用 3 次 。 它 计算 指定 三 角形 的 法 向 量 ， 然 后 调用 函数 setOutputValues() 为 
发 出 的 每 个 顶点 分 配 适 当 的 输出 顶点 属性 。 在 发 出 所 有 3 个 顶点 之 后 , 它 调用 EndPrimitive()。 
为 了 确保 准确 地 执行 光照 ， 为 每 个 新 创建 的 顶点 计算 光照 方向 向 量 的 新 值 。 


程序 13.3 ”几何 着 色 器 : 添加 图 元 


vec3 newPoints[ ], lightDir[ ]; 


float sLen = 0.01; // sLen 是 "尖峰 长 度 "， 小 金字 塔 的 高 度 


void setOutputValues(int p, vec3 norm) 
{ varyingNormal = norm; 
varyingLightDir = lightDir[p]; 
varyingVertPos = newPoints[p]; 
gl_Position = proj matrix * vec4(newPoints[p], 1.0); 


} 


void makeNewTriangle(int pl, int p2) 

{ // 为 这 个 三 角形 生成 表面 法 向 量 
vec3 cl = normalize(newPoints[pl] - newPoints[3]); 
vec3 c2 = normalize(newPoints[p2] - newPoints[3]); 
vec3 norm = cross(cl,c2); 


// 生成 并 发 出 3 个 顶点 

setOutputValues(pl, norm); EmitVertex(); 
setOutputValues(p2, norm); EmitVertex(); 
setOutputValues(3, norm); EmitVertex(); 

EndPrimitive(); 
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} 


void main(void) 

{ // 给 三 个 三 角形 项 点 加 上 原始 表面 法 向 量 
vec3 sp0 = gl _in[0].gl_Position.xyz + varyingOriginalNormal [0] *sLen; 
vec3 spl = gl_in[1].gl_Position.xyz + varyingOriginalNormal [1] *sLen; 
vec3 sp2 = gl_in[2].gl_ Position.xyz + varyingOriginalNormal [2] *sLen; 


// 计算 组 成 小 金字 塔 的 新 点 





newPoints[0] = gl_in[0].gl_Position.xyz; 
newPoints[1] = gl_in[1].gl_ Position.xyz; 
newPoints[2] = gl_in[2].gl_ Position. xyz; 
newPoints[3] = (sp0 + spl + sp2)/3.0; // 尖峰 点 
// 计算 从 顶点 到 光照 的 方向 

lightDir[0] = light.position - newPoints[0]; 
lightDir[1] = light-position - newPoints[1]; 


lightDir[2] = light.position - newPoints[2]; 
lightDir[3] = light.position - newPoints[3]; 


// 构建 3 个 三 角形 ， 以 组 成 小 金字 塔 的 表面 
makeNewTriangle(0,1); // 第 三 个 点 永远 是 尖峰 点 
makeNewTriangle(1,2); 
makeNewTriangle (2,0); 

} 


结果 输出 如 图 13.9 所 示 。 如 果 尖 峰 长 度 (sSLen) 变量 增加 ， 则 添加 的 表面 “金字 塔 ” 将 
更 高 。 然而, 在 没有 阴影 的 情况 下 ,它们 可 能 看 起 来 并 不 真实 。 将 阴影 贴图 添加 到 程序 13.3 
留 作 练习 。 





图 13.9 ”几何 着 色 器 : 添加 图 元 


仔细 应 用 这 种 技术 可 以 模拟 尖峰 、 荆 束 和 其 他 精细 表面 突起 , 或 者 反 向 的 压 痕 、 四 坑 ( 参 


考 资 料 Dv14 TRIG, XS16] ae 
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OpenGL 允许 在 几何 着 色 器 中 更 改 图 元 类 型 。 此 功能 的 一 个 常见 用 途 是 将 输入 三 角形 转 
换 为 一 个 或 多 个 输出 线段 ， 来 模拟 毛发 或 头发 。 虽 然 生 成 令 人 信服 的 头发 仍然 是 更 难 的 现 
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实 世 界 项 目 之 一 ， 但 几何 着 色 器 可 以 在 许多 情况 下 帮助 实现 实时 演 染 。 

程序 13.4 显示 了 一 个 几何 着 色 器 , 它 将 每 个 输入 的 3 个 顶点 的 三 角形 转换 为 一 个 向 外 的 
两 个 顶点 的 线段 。 它 首先 通过 平均 三 角形 顶点 位 置 生成 三 角形 的 质心 ， 来 计算 头发 束 的 起 
点 。 然 后 它 使 用 和 程序 13.3 中 相同 的 “尖峰 点 ”作为 头发 的 终点 。 输 出 图 元 被 指定 为 具有 
两 个 顶点 的 线段 ， 第 一 个 顶点 是 起 点 ， 第 二 个 顶点 是 终点 。 结 果 显 示 在 图 13.10 中 ， 用 于 实 
例 化 维 数 为 72 个 切片 的 环 面 。 





图 13.10 将 三 角形 图 元 更 改 为 线 图 元 


当然 ， 这 仅仅 是 产生 完全 通 真 头发 的 起 点 。 使 头发 弯曲 或 移动 将 需要 若干 修改 ， 例 如 为 
线条 生成 更 多 顶点 并 沿 曲线 计算 它们 的 位 置 和 /或 结合 随机 性 。 由 于 线段 没有 明显 的 表面 法 
向 量 ， 光 照会 很 复杂 ; 在 这 个 例子 中 ， 我 们 简单 地 指定 法 向 量 与 原始 三 角形 的 表面 法 向 量 
相同 。 


程序 13.4 几何 着 色 器 : 改变 图 元 类 型 


layout (line strip, max vertices=2) out; 





void main (void) 

{ vec3 op0 = gl_in[0].gl_Position.xyz; // 原始 三 角形 顶点 
vec3 opl = gl in[1].9g1 Position. xyz; 

vec3 op2 = gl_in[2].gl_ Position. xyz; 

vec3 ep0 = gl_in[0].gl_Position.xyz + varyingNormal[0]*sLen; / 偏 移 三 角形 项 点 
vec3 epl = gl_in[1].gl_Position.xyz + varyingNormal[1]*sLen; 
vec3 ep2 = gl_in[2].gl_ Position.xyz + varyingNormal[2]*sLen; 

// 计算 组 成 小 线段 的 新 点 

vec3 newPointl = (op0 + opl + op2)/3.0; // 原始 (起 始 ) 点 

vec3 newPoint2 = (ep0 + epl + ep2)/3.0; // 结束 点 





gl_Position = proj matrix * vec4(newPointl, 1.0); 
varyingVertPosG = newPointl; 

varyingLightDirG = light.position - newPointl; 
varyingNormalG = varyingNormal [0]; 

EmitVertex(); 


gl Position = proj matrix * vec4(newPoint2, 1.0); 
varyingVertPosG = newPoint2; 

varyingLightDirG = light.position - newPoint2; 
varyingNormalG = varyingNormal [1]; 
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EmitVertex(); 


EndPrimitive(); 
} 


补充 说 明 


几何 着 色 器 吸引 人 的 一 点 在 于 它们 相对 容易 使 用 。 虽 然 几 何 着 色 器 的 许多 应 用 可 以 使 用 
曲面 细 分 来 实现 ， 但 几何 着 色 器 的 机 制 通常 使 它们 更 容易 实现 和 调试 。 当 然 ， 几 何 与 曲面 
细 分 的 相对 适用 范围 取决 于 特定 的 应 用 。 

生成 令 人 信服 的 真实 头发 或 毛发 具有 挑战 性 ， 并 且 根 据 应 用 场景 需要 采用 多 种 技术 。 在 
某 些 情况 下 ， 简 单 的 纹理 就 足够 了 ， 或 者 可 以 使 用 曲面 细 分 或 几何 着 色 器 ， 例 如 本 章 所 示 
的 基本 技术 。 当 需要 更 真实 的 效果 时 ， 移 动 〈 动 画 ) 和 光照 变 得 环 手 。 头 发 和 毛发 生成 的 
两 个 专用 工具 是 HairWorks 和 TressFX. HairWorks 是 NVIDIA GameWorks 套件 [GY18 的 一 部 
分 ， 而 TressFX 是 由 AMD 开发 的 中 器。 前 者 适用 于 OpenGL 和 DirectX， 而 后 者 仅 适 用 于 
DirectX。 使 用 TressFX AHF AY LA ELC MI $e i 


= eR 


gi 


13.1 ”修改 程序 13.1， 使 其 将 每 个 顶点 略微 移 向 其 原始 三 角形 的 中 心 。 结 果 应 该 类 似 于 
图 13.5 中 的 爆炸 环 面 ， 但 没有 环 面 尺 寸 的 整体 变化 。 

13.2 ”修改 程序 13.2， 使 其 删除 每 第 2 个 图 元 或 每 第 4 个 图 元 (而 不 是 每 第 3 个 图 元 )， 
并 观察 对 生成 的 泻 染 环 面 的 影响 。 此 外 ， 尝 试 将 实例 化 环 面 的 维度 更 改 为 不 是 3 的 倍数 的 
值 (例如 40)， 同 时 仍然 删除 每 第 3 个 图 元 ， 这 会 有 许多 可 能 的 影响 。 

13.3 (RA) 修改 程序 13.4 以 额外 泻 染 原始 环 面 。 也 就 是 说 ， 泻 染 一 个 有 光照 的 环 面 
(如 前 面 第 7 章 所 述 ) 和 向 外 线段 〈 使 用 几何 着 色 器 )， 使 “头发 ”看 起 来 像 是 从 环 面 中 出 
来 的 。 

13.4 〔 研 究 和 项 目 ) 修改 程序 13.4， 使 其 生成 具有 两 个 以 上 顶点 的 向 外 线段 ， 这 些 顶 
点 排列 使 得 线段 看 起 来 略微 弯曲 。 


[DV14] J. deVries, LearnOpenGL, 2014, accessed October 2018. 

[GP14] GPU Pro 5: Advanced Rendering Techniques, ed. W. Engel (CRC Press, 2014). 

[GW18] NVIDIA GameWorks Suite, 2018, accessed May 2018. 

[KS16] J. Kessenich, G. Sellers, and D. Shreiner, OpenGL Programming Guide: The Official Guide to Learning 
OpenGL, Version 4.5 with SPIR-V, 9th ed. (Addison-Wesley, 2016). 

[TR13] P. Trettner, “Prototype Grass” (blog), 2013, accessed October 2018. 

[TR18] TressFX Hair, AMD, 2018, accessed May 2018. 
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在 本 章 中 ， 我 们 将 使 用 在 本 书 中 学 到 的 工具 来 探索 各 种 技术 。 有 些 我 们 会 完全 讲解 ， 而 
其 他 一 些 我 们 将 只 会 粗略 描述 。 图 形 编程 是 一 个 巨大 的 领域 ， 本 章 绝 不 是 全 面 的 ， 而 是 介 
绍 了 多 年 来 发 展 的 一 些 创造 性 效果 。 


4.1 Z 


i SAAS IY, ANT SAR BA Se ise, 能见度 很 低 。 FKE, KAZE CUFF) 
HEMI KS BAUMAN BH IL. KERR, BAUPMSA CERNE, RMCAY 
惯 于 看 到 它 ， 通 常 不 会 意识 到 它 的 存在 ， 所 以 我 们 可 以 通过 引入 雾 来 增强 我 们 室外 场景 的 
真实 感 一 一 即使 只 是 少量 。 

雾 也 可 以 增强 深度 感 。 近 处 物体 比 远 处 物体 具有 更 高 的 清晰 度 ， 对 于 我 们 的 大 脑 是 可 以 
用 来 破译 3D 场景 的 地 形 结构 的 另 一 个 视觉 提示 。 

模拟 雾 的 方法 有 很 多 种 ， 从 非常 简单 的 模型 到 包含 光 散 射 效 应 的 复杂 模型 。 即 使 非常 简 
单 的 方法 也 是 有 效 的 。 有 一 种 方法 是 基于 物体 距 眼睛 的 距离 将 实际 像素 颜色 与 另 一 种 颜色 
( 雾 ”的 颜色 通常 是 灰色 或 蓝 灰 色 一 一 也 用 于 背景 颜色 ) 混合 。 

图 14.1〈 见 彩 插 ) 说 明了 这 个 概念 。 眼 睛 《相机 ) 显示 在 左 侧 ， 两 个 红色 物体 放置 在 视 
锥 体 中 。 圆 柱 体 更 靠近 眼睛 ， 所 以 它 主要 是 原始 颜色 〈 红 色 ); 立方 体 远离 眼睛 ， 所 以 它 主 
要 是 雾 色 。 对 于 这 个 简单 的 实现 ， 几 乎 所 有 的 计算 都 可 以 在 片段 着 色 器 中 执行 。 


颜色 (几乎 ) 基于 对 象 颜色 


颜色 (几乎 ) 基于 雾 的 颜色 
图 14.1 5: 基于 距离 的 混合 


程序 14.1 显示 了 一 个 非常 简单 的 雾 算法 的 相关 代码 ， 该 算法 按照 从 相机 到 像素 的 距离 ， 
使 用 从 对 象 颜色 到 筋 颜 色 的 线性 混合 。 有 具体 来 说 ， 此 示例 将 雾 添加 到 程序 10.4 中 的 高 度 贴 
图 示例 。 





ee 
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程序 14.1 简单 的 雾 生成 
顶点 着 色 器 





out vec3 vertEyeSpacePos; 


// 在 视觉 空间 中 不 考虑 透视 计算 顶点 位 置 ， 并 将 它 发 送 给 片段 着 色 器 
// 变量 "p" 是 高 度 贴图 后 的 顶点 ， 正 如 程序 10. 4 中 所 述 
vertEyeSpacePos = (mv _ matrix * p).xyz; 

片段 着 色 器 

in vec3 vertEyeSpacePos; 

out vec4 fragColor; 


void main(void) 
{ vec4 fogColor = vec4(0.7, 0.8, 0.9, 1.0); 


float fogStart = 0.2; 
float fogEnd = 0.8; 


// 在 视觉 空间 中 从 摄像 机 到 顶点 的 距离 就 是 到 这 个 顶点 的 向 量 的 长 度 ， 因 为 摄像 机 在 视觉 空间 中 的 (0, 0, 0) 位 置 
float dist = length(vertEyeSpace. xyz) ; 
float fogFactor = clamp(((fogEnd - dist) / (fogEnd - fogStart)), 0.0, 1.0); 
fragColor = mix(fogColor, (texture(t,tc), fogFactor); 

} 


变量 fogColor 指定 雾 的 颜色 。 变 量 fogStart 和 fogEnd 指定 输出 颜色 从 对 象 颜色 过 渡 到 
雾 色 的 范围 《〈 在 视觉 空间 中 )， 并 且 可 以 调整 以 满足 场景 的 需要 。 在 对 象 颜色 中 混合 的 雾 的 
百分比 在 变量 fogFactor 中 计算 , 该 变量 是 顶点 与 fogEnd 的 接近 程度 与 过 渡 区 域 的 总 长 度 之 
比 。GLSL 的 clamp(O 函 数 用 于 将 此 比率 限制 在 值 0.0 和 1.0 之 间 。 然 后 ，GLSL 的 mixO 函 数 
根据 fogFactor 的 值 返回 雾 颜色 和 对 象 颜色 的 加 权 平 均值 。 图 14.2《〈 见 彩 插 ) 展示 了 向 具有 
高 度 贴图 地 形 的 场景 添加 雾 〈E019 的 岩石 纹理 也 已 应 用 )。 





14.2 FRAT 


14.2 Ae. 2S. AAR 


我 们 已 经 看 到 了 一 些 混合 的 例子 , 比如 第 7 RA Ah Fe BH AMA A KARE. BE, 
我 们 还 没有 看 到 如 何在 像素 操作 期 间 利用 片段 着 色 器 之 后 的 混合 (或 合成 ) 功能 (回想 一 
下 图 2.2 所 示 的 管线 序列 )。 透 明度 在 那个 步骤 被 处 理 ， 我 们 现在 来 了 解 一 下 。 
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在 本 书 中 , 我 们 经 常 使 用 vec4 数据 类 型 来 表示 齐 次 坐标 系 中 的 3D 点 和 向 量 。 您 可 能 
经 注意 到 我 们 还 经 常 使 用 vec4 来 存储 颜色 信息 ， 其 中 前 3 个 值 由 红色 、 绿 色 和 蓝 色 组 成 ， 
那么 第 四 个 元 素 是 什么 ? 

颜色 中 的 第 四 个 元 素 称 为 Alpha 通道 ， 用 来 指定 颜色 的 不 透明 度 。 不 透明 度 是 衡量 像素 
颜色 不 透明 程度 的 指标 。Alpha 值 为 0 表示 “无 不 透明 度 ” 或 完全 透明 。Alpha 值 为 1 表示 
“不 透明 度 满 值 ” 也 就 是 完全 不 透明 。 在 某 种 意义 上 ， 颜 色 的 “透明 度 ” 是 1-a， 其 中 a 是 
Alpha 通道 的 值 。 

回忆 一 下 第 2 章 ， 像 素 操作 利用 乙 缓冲 区 ， 当 发 现 另 一 个 对 象 在 该 像素 的 位 置 更 近 时 ， 
通过 替换 现 有 的 像素 颜色 来 实现 隐藏 面 消除 。 我 们 实际 上 可 以 更 好 地 控制 这 个 过 程 一 一 可 以 
选择 混合 两 个 像素 。 

当 泻 染 一 个 像素 时 ， 它 被 称 为 “ 源 ” 像 素 。 已 经 在 帧 缓冲 器 中 的 像素 (可 能 是 从 先前 的 对 
象 泻 染 得 来 ) 被 称 为 “目标 ”像素 。OpenGL 提供 了 许多 选项 ， 用 于 决定 最 终 将 两 个 像素 中 
的 哪 一 个 或 者 它们 的 组 合 ， 放 置 在 帧 缓冲 区 中 。 请 注意 ， 像 素 操作 步骤 不 是 可 编程 阶段 一 一 
因此 用 于 配置 所 需 合成 的 OpenGL 工具 可 在 C+ 应 用 程序 中 而 不 是 在 着 色 器 中 ) 找到 。 

用 于 控制 合成 的 两 个 OpenGL 函数 是 glBlendEquation(mode) 和 glBlendFunc(srcFactor, 
destFactor)。 图 14.3 显示 了 合成 过 程 的 概述 。 


来 自 C++/OpenGL 应 用 程序 
glBlendEquation() glBlendFunc() 


来 自 片段 着 色 器 的 [RGBA] 
原 像素 颜色 


目标 颜色 [RGBA] 





图 14.3 OpenGL 合成 概述 


合成 过 程 的 工作 过 程 如 下 。 

(1) 源 像素 和 目标 像素 分 别 乘 以 源 因子 和 目标 因子 。 源 和 目标 因子 在 blendFunc() 函 数 调 
用 中 指定 。 

(2) 然后 使 用 指定 的 blendEquation 来 组 合 修改 后 的 源 像 素 和 目标 像素 以 生成 新 的 目标 
颜色 。 混 合 方程 在 glBlendEquation() 调 用 中 指定 。 

glBlendFunc() 参 数 的 常见 选项 ( 即 srcFactor 和 destFactor) 如 表 14.1 所 示 。 


表 14.1 glBlendFunc() 参 数 的 常见 选项 
glBlendFunc() 参 数 srcFactor 或 destFactor 的 结果 


GL ZERO (0,0,0,0) 
(1,1,1,1) 
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续 表 
glBlendFunc() 参 数 srcFactor 或 destFactor 的 结果 
GL SRC COLOR CR 
GL_ONE_MINUS SRC COLOR CLL (Ree ‘Gis, Bae Asc) 
GL DST COLOR (Gin Gin Baests Adest) 
GL_ONE_MINUS_DST_COLOR (1,1,1,1)— (Rotendcotors GblendColor, BblendColor, AblendColor) 
GL SRC ALPHA (Asre, Asres Asres Asre) 
GL_ONE_MINUS SRC ALPHA AAA) 
GL ONE MINUS DST ALPHA (i. 1, 1, teh, Ade ea hal 
GL_CONSTANT_COLOR (RblendColor, GblendColor, BblendColor, AblendColor) 

_GL ONE MINUS CONSTANT COLOR (1,1,1,)— (Roiendcotors GblendColor, Bblendcolo AblendColor) 
GL_CONSTANT_ALPHA (AplendColor, AbtendColors AblendColor, AblendColor) 
GL_ONE_MINUS_CONSTANT_ALPHA (1,1,1,)~ (Ablendcolon Ablendcolon AblendColor, AblendColor) 
GL ALPHA SATURATE GAA 1), HF f= min(Age, 1) 


那些 用 到 “blendColor”(GL CONSTANT COLOR 等 ) 的 选项 需要 额外 调用 giBlendColor() 
来 指定 将 用 于 计算 混合 函数 结果 的 常量 颜色 。 还 有 一 些 其 他 混合 函数 未 在 表 14.1 中 显示 。 
glBlendEquation(0) 参 数 〈 混 合 模式 ) 的 可 能 选项 如 表 14.2 所 示 。 


表 14.2 glBlendEquation() 参 数 的 可 能 选项 
模 x 混合 颜色 
GL FUNC ADD result=sourceggpa+destinationggpa 
GL_FUNC_SUBTRACT result=sourceggpa—destinationggpa 
GL FUNC REVERST SUBTRACT result=destinationkGBA—SOUrCERGBA 
GL _ MIN result=min(sourceggpa, destinationRGBA) 
GL MAX result=max(sourcerGpA, destinationRGBA) 


glBlendFunc() 默 认 设置 srcFactor 为 GL ONE (1.0), destFactor 为 GL ZERO (0.0). 
glBlendEquation() 的 默认 值 为 GL_FUNC_ADD. 因此 , 在 默认 情况 下 , 源 像素 不 变 ( 乘 以 1)， 
目标 像素 被 按 比 例 缩小 到 0， 并且 两 者 相 加 意味 着 源 像素 变 为 帧 缓冲 区 的 颜色 。 

还 有 命令 glEnable(GL_ BLEND)! glDisable(GL_BLEND)， 它 们 可 用 于 告诉 OpenGL 应 
用 指定 的 混合 ， 或 忽略 它 。 

我 们 不 会 在 这 里 说 明 所 有 选项 的 效果 ， 但 我 们 将 介绍 一 些 说 明 性 示例 。 假 设 我 们 在 
C++/OpenGL 应 用 程序 中 指定 以 下 设置 : 


glBlendFunc (GL SRC ALPHA, GL ONE MINUS SRC ALPHA) 
glBlendEquation (GL_FUNC ADD) 


合成 将 如 下 进行 。 
C) 源 像素 按 其 Alpha 值 缩放 。 
(2) 目标 像素 按 1-srcAlpha 〈 源 透明 度 ) 缩放 。 
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(3) 像素 值 加 在 一 起 。 
例如 ， 如 果 源 像素 为 红色 ， 具 有 75% 不 透明 度 ， 即 [1,0,0,0.75]， 并 且 目 标 像素 包含 完全 
不 透明 的 绿色 ， 即 [0,1,0,1]， 则 结果 放 在 帧 缓冲 区 将 是 : 


srcPixel * srcAlpha = [0.75, 0, 
destPixel * (l-srcAlpha) = [0, 0.25, 0, 0.25] 
resulting pixel = [0.75, 0.25, 0, 0.8125] 


也 就 是 说 ， 主 要 是 红色 ， 有 些 是 绿色 的 ， 而 且 基 本 上 是 实 色 。 这 个 设置 的 总 体 效 果 
是 让 目标 像素 以 与 源 像素 的 透明 度 相 对 应 的 量 显 示 。 在 此 示例 中 ， 帧 缓冲 区 中 的 像素 为 
绿色 ， 输 入 像素 为 红色 ， 透 明度 为 25% (不 透明 度 为 73%)。 因 此 允许 一 些 绿色 通过 红 
色 显 示 。 

事实 证 明 ， 混 合 函 数 和 混合 方程 的 这 些 设置 在 许多 情况 下 都 能 很 好 地 工作 。 我 们 将 它们 
应 用 到 包含 两 个 3D 模型 的 场景 中 的 实际 示例 中 去 : 一 个 环 面 和 环 面前 的 金字 塔 。 图 14.4 
显示 了 这 样 一 个 场景 ， 左 边 是 一 个 不 透明 的 金字 塔 ， 右 边 是 金字 塔 的 Alpha 值 设置 为 0.8。 
光照 已 经 添加 。 

对 于 许多 应 用 一 一 例如 创建 平面 “窗口 ”作为 房屋 模型 的 一 部 分 ， 这 种 简单 的 透明 度 实 
现 可 能 就 足够 了 。 但 是 ， 在 图 14.4 所 示 的 示例 中 ， 存 在 相当 明显 的 不 足 之 处 。 尽 管 金字 塔 
模型 现在 实际 上 是 透明 的 ， 但 实际 透明 的 金字 塔 不 仅 应 该 显示 其 背后 的 对 象 ， 还 应 该 显示 
其 自身 的 背面 。 





图 14.4 ”金字塔 的 Alpha= 1.0 (Æ), Alpha=0.8 (Æ) 


实际 上 ， 金 字 塔 的 背面 没有 出 现 的 原因 是 因为 我 们 启用 了 背面 剔除 。 一 个 合理 的 想法 可 
能 是 在 绘制 金字 塔 时 禁用 背面 剔除 。 但 是 ， 这 通常 会 产生 其 他 伪 影 ， 如 图 14.5 左 图 所 示 。 
简单 地 禁用 背面 剔除 的 问题 在 于 混合 的 效果 取决 于 渔 染 表 面 的 顺序 〈 因 为 这 决定 了 源 像素 
和 目标 像素 )， 并 且 我 们 不 总 是 能 够 控制 泻 染 顺 序 。 通 常 有 利 的 是 首先 泻 染 不 透明 对 象 ， 以 
及 在 后 面 的 对 象 〈 例 如 环 面 )， 最 后 再 泻 染 透明 对 象 。 这 也 适用 于 金字 塔 的 表面 ， 并 且 在 这 
种 情况 下 ， 包 括 金字 塔 底部 的 两 个 三 角形 看 起 来 不 同 的 原因 是 它们 中 的 一 个 在 金字 塔 的 前 
面 之 前 被 浑 染 而 一 个 在 之 后 被 泻 染 。 诸 如 此 类 的 伪 影 有 时 被 称 为 “顺序 ” 伪 影 ， 并 且 它 们 
可 以 在 透明 模型 中 显示 ， 因 为 我 们 不 总 是 能 预测 其 三 角形 将 被 泻 染 的 顺序 。 

我 们 可 以 通过 从 背面 开始 分 别 泻 染 正面 和 背面 来 解决 金字 塔 示例 中 的 问题 。 程 序 14.2 
显示 了 执行 此 操作 的 代码 。 我 们 通过 统一 变量 来 指定 金字 塔 的 Alpha 值 并 传递 给 着 色 器 程 
序 ， 然 后 通过 将 指定 的 Alpha 替换 为 计算 的 输出 颜色 将 其 应 用 于 片段 着 色 器 中 。 
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男 请 注意 ， 要 使 光照 正常 工作 ,我们 必须 在 泻 染 背面 时 翻转 法 向 量 。 我 们 通过 向 顶点 着 
色 右 发 送 一 个 标志 来 完成 此 操作 ， 然 后 我 们 在 其 中 翻转 法 向 量 。 


程序 14.2 ”透明度 的 两 遍 混合 








C++ / OpenGL 应 用 程序 一 一 在 演 染 金字 塔 的 display () 函数 中 : 


glEnable (GL CULL FACE); 


glEnable (GL_BLEND) ; // 配置 混合 设置 
glBlendFunc (GL SRC_ALPHA，GL_ONE_MINUS_SRC_RALPHRA) 7 
glBlendEquation (GL FUNC ADD); 


glCullFace (GL FRONT); // 先 演 染 金字 塔 的 背面 

glProgramUniformlf (renderingProgram, aLoc, 0.3f); // 背面 非常 透明 
glProgramUniformlf (renderingProgram, floc, -1.0f); // 翻转 背面 的 法 向 量 
glDrawArrays (GL TRIANGLES, 0, numPyramidVertices) ; 

glCullFace (GL_BACK) ; // 然后 演 染 金字 塔 的 正面 
glProgramUniformlf(renderingProgram, aLoc, 0.7f); // 正面 略微 透明 
glProgramUniformlf (renderingProgram, floc, 1.0f); // 正面 不 需要 翻转 法 向 量 





glDrawArrays (GL TRIANGLES, 0, numPyramidVertices) ; 


glDisable(GL_BLEND) ; 





顶点 着 色 器 : 

if (flipNormal < 0) varyingNormal = -varyingNormal; 

片段 着 色 器 : 

fragColor = globalAmbient * material.ambient + ... etc. // Mi Blinn-Phong 光照 一 样 
fragColor = vec4(fragColor.xyz, alpha); // 使 用 统一 变量 中 发 送 的 Alpha 值 替换 


这 种 “两 裔 ”解决 方案 的 结果 如 图 14.5 右 图 所 示 。 





图 14.5 透明 度 和 背面 : HFA A) 和 两 遍 校正 ( 右 ) 


虽然 它 在 这 里 运行 良好 ， 但 程序 14.2 中 显示 的 两 遍 解 决 方案 并 不 总 是 足够 的 。 例 如 ， 一 
些 更 复杂 的 模型 可 能 具有 面向 前 方 的 隐藏 表面 ， 并 且 如 果 这 样 的 对 象 变 得 透明 ， 我 们 的 算 
法 将 无 法 泻 染 模型 的 那些 隐藏 的 前 向 部 分 。Alec Jacobson 描述 了 一 个 适用 于 大 量 案例 的 五 
ime, 
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14.3 APRRPRKEAD 


OpenGL 不 仅 可 以 应 用 于 视 锥 体 ， 还 包括 了 指定 剪裁 平面 的 功能 。 用 户 定义 的 剪裁 平 
面 的 一 个 用 途 是 对 模型 切片 。 这样 就 可 以 通过 从 简单 的 模型 开始 并 从 中 切片 来 创建 复杂 的 
形状 。 

剪裁 平面 使 用 平面 的 标准 数学 定义 来 定义 : 

ax + by+cz+d=0 
其 中 a、b、c 和 4 EMREN X, 了 和 Z 轴 的 3D 空间 中 特定 平面 的 参数 。 参 数 表示 垂直 
于 平面 的 向 量 (wp,c)， 以 及 从 原点 到 平面 的 距离 g。 可 以 使 用 vec4 在 顶点 着 色 器 中 指定 这 样 
的 平面 ， 如 下 所 示 : 


vec4 clip plane = vec4 (0.0,0.0, -1.0,0.2) ; 


这 对 应 于 平面 : 
(0.0) x + (0.0) y+(-1.0)z+0.2=0 
然后 ， 通 过 使 用 内 置 的 GLSL 变量 gl ClipDistance[ ]， 可 以 在 顶点 着 色 器 中 实现 裁剪， 
如 下 例 所 示 : 


gl ClipDistance [0] = dot(clip_plane.xyz, vertPos) + clip. plane.w; 


在 此 示例 中 ，vertPos 指 的 是 在 顶点 属性 〈 例 如 来 自 VBO) 中 进入 顶点 着 色 器 的 顶点 位 
置 ，clip_plane 定义 如 上 。 然 后 我 们 计算 从 裁剪 平面 到 传 入 顶点 的 带 符号 距离 〈 如 第 3 章 所 
示 )， 如 果 顶 点 在 平面 上 ， 则 为 0， 或 者 取决 于 顶点 在 平面 的 哪 一 侧 而 为 负 或 正 。 
gl ClipDistance 数组 的 下 标 允 许 定义 多 个 裁剪 距离 〈 即 多 个 平面 )。 可 以 定义 的 最 大 用 户 裁 
前 平面 数量 取决 于 图 形 卡 的 OpenGL 实现 。 

然后 必须 在 C++/OpenGL 应 用 程序 中 启用 用 户 定 义 的 裁剪 。 内 置 OpenGL 标识 符 
GL_CLIP_DISTANCE0. GL_CLIP_DISTANCE1 等 , 对 应 于 每 个 glL_ClipDistance[ ] 数 组 元 素 。 
例如 ， 启 用 第 0 个 用 户 定 义 剪 裁 平 面 ， 如 下 所 示 。 


glEnable(GL_CLIP_DISTANCE0) ; 


将 前 面 的 步骤 应 用 到 我 们 的 发 光环 面 会 产生 如 图 14.6 所 示 的 输出 , 其 中 环 面 的 前 半 部 分 
已 经 被 前 裁 了 【还 应 用 了 旋转 以 提供 更 清晰 的 视图 )。 

可 能 看 起 来 好 像 环 面 的 底部 也 被 修剪 了 ， 但 这 是 因为 环 面 的 内 表面 没有 被 泻 染 。 当 裁 
前 会 显示 形状 的 内 部 表面 时 ， 也 就 需要 演 染 它们 ， 耕 则 模型 将 显示 得 不 完整 (如 图 14.6 
所 示 )。 

泻 染 内 表面 需要 再 次 调用 gl DrawArrays0， 并 颠倒 缠绕 顺序 。 此 外 ， 在 泻 染 背 向 三 角形 
时 , 必须 反 转 曲面 法 向 量 ( 如 上 一 节 所 述 )。C++ 应 用 程序 和 顶点 着 色 器 的 相关 修改 如 程序 14.3 
所 示 ， 输 出 如 图 14.7 所 示 。 


OO gy 
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图 14.6 “剪裁 一 个 环 面 图 14.7 ” 带 背 面 的 剪裁 
程序 14.3” 带 背面 的 剪裁 





C++ / OpenGL 应 用 程序 : 

void display (GLFEWwindow* window, double currentTime) { 
flipted = glGetUniformLocation(renderingProgram, "flipNormal"); 
glEnable (GL_CLIP_DISTANCEO) ; 


// 正常 绘制 外 表面 

glUniformli(flipLoc, 0); 

glFrontFace (GL_CCW) ; 

glDrawElements(GL_ TRIANGLES, numTorusIndices, GL UNSIGNED INT, 0); 


// 泻 染 背面 ， 法 向 量 反 转 

glUniformli(flipLoc, 1); 

glFrontFace (GL CW); 

glDrawElements (GL TRIANGLES, numTorusIndices, GL UNSIGNED INT, 0); 
} 


顶点 着 色 器 : 


vec4 clip plane = vec4(0.0, 0.0, -1.0, 0.5); 
uniform int flipNormal; // 反 转 法 向 量 的 标志 


void main(void) 
oe 
if (flipNormal==1) varyingNormal = -varyingNormal; 


gl_ClipDistance[0] = dot(clip_plane.xyz, vertPos) - clip_plane.w; 


14.4 3D 纹理 


2D 纹理 包含 由 两 个 变量 索引 的 图 像 数据 , 而 3D 纹理 包含 相同 类 型 的 图 像 数据 , 但 是 处 
在 由 3 个 变量 索引 的 3D 结构 中 。 前 两 个 维度 仍然 代表 纹理 贴图 中 的 宽度 和 高 度 ， 第 三 个 维 
度 代表 深度 。 

因为 3D 纹理 中 的 数据 以 与 2D 纹理 类 似 的 方式 存储 ， 所 以 很 容易 将 3D 纹理 视 为 一 种 
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3D “AR”. 但 是 ， 我 们 通常 不 将 3D 纹理 源 数据 称 为 3D 图 像 ， 因 为 对 于 这 种 结构 没有 常 
用 的 图 像 文件 格式 〈 即 没有 类 似 的 3D 版 卫 EG， 至 少 没 有 真正 三 维 的 图 像 )。 相 反 ， 我 们 建 
议 将 3D 纹理 视 为 一 种 物质 ， 我 们 将 其 漫 没 〈 或 “浸入 ”) 被 纹理 化 的 对 象 ， 从 而 使 对 象 的 
表面 点 从 纹理 中 的 相应 位 置 获 得 颜色 。 或 者 可 以 想象 这 个 物体 被 从 3D BORE ETT PR” P “e 
刻 ” 出 来 ， 就 像 雕 塑 家 用 一 块 坚固 的 大 理 石雕 刻 出 一 个 人 物 一 样 。 

OpenGL 支持 3D 纹理 对 象 , 为 了 使 用 它们 , 我 们 需要 学 习 如 何 构建 3D 纹理 以 及 如 何 使 
用 它 来 纹理 化 对 象 。 

与 可 以 从 标准 图 像 文件 构建 的 2D 纹理 不 同 , 3D 纹理 通常 是 在 程序 上 生成 的 。 正 如 之 前 
对 2D 纹理 所 做 的 那样 ， 我 们 决定 分 辨 率 ， 即 每 个 维度 中 的 纹 素数 量 。 根 据 纹理 中 的 颜色 ， 
我 们 可 以 构建 包含 这 些 颜 色 的 三 维 数组 。 如 果 纹 理 包 含 可 以 与 各 种 颜色 一 起 使 用 的 “图 案 ”， 
我 们 可 能 会 建立 一 个 保存 图 案 的 数组 ， 例 如 0 和 1。 

例如 ,我 们 可 以 通过 填充 对 应 于 所 需 条 纹 图 案 的 0 和 !1 的 数组 来 构建 表示 水 平 条 纹 的 3D 
纹理 。 假 设 纹理 的 所 需 分 辨 率 是 200X200X200 纹 素 ， 并 且 纹 理由 交替 的 条 纹 组 成 ， 每 个 
条 纹 高 10 纹 素 。 通 过 在 藤 套 循环 中 使 用 适当 的 0 和 1 填充 数组 来 构建 此 类 结构 的 简单 函数 
(假设 在 这 种 情况 下 ， 宽 度 、 高 度 和 深度 变量 均 设置 为 200) 将 如 下 所 示 。 

void generate3Dpattern() { 

for (int x=0; x<texWidth; x++) { 

for (int y=0; y<texHeight; y++) { 
for (int z=0; z<texDepth; z++) { 
if ((y/10) % 2 == 0) 
tex3Dpattern[x] [y] [z] = 0.0; 
pe abated = 1505 
} 
} 


} 
} 


存储 在 tex3Dpattern 数组 中 的 图 案 如 图 14.8 Pras CLR), 0 ERG, 1 EA. 

使 用 条 纹 图 案 对 对 象 进行 纹理 处 理 , 如 图 14.8 所 
示 ， 需 要 执行 以 下 步骤 。 

C1) 生成 如 上 所 示 的 图 案 。 

(2) 使 用 图 案 填 充 所 需 颜色 的 字 节 数 组 。 

(3) 将 字 节 数组 加 载 到 纹理 对 象 中 。 

(4) 确定 对 象 项 点 的 适当 3D 纹理 坐标 。 

(5) 在 片段 着 色 器 中 使 用 适当 的 采样 器 来 纹理 化 
对 象 。 

3D 纹理 的 纹理 坐标 范围 为 [0...1]， 与 2D 纹理 
的 方式 相同 。 

有 趣 的 是 ， 步 又 (4) CHE 3D 纹理 坐标 ) 通常 
比 最 初 怀疑 的 要 简单 得 多 。 事 实 上 ， 它 通常 比 2D 纹 
理 更 简单 ! 这 是 因为 (在 2D 纹理 的 情况 下 ) 3D 对 象 被 2D 图 像 纹 理化 ， 我 们 需要 决定 如 何 
“ 展 平 ”3D 对 象 的 顶点 (例如 通过 UV 映射 ) 来 创建 纹理 坐标 。 但 是 当 3D 纹理 化 时 ， 对 象 





图 14.8 ”条纹 3D 纹理 图 案 
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和 纹理 都 具有 相同 的 维度 。 在 大 多 数 情况 下 ， 我 们 希望 对 象 反 映 纹理 图 案 ， 就 像 它 被 “ 雕 
刻 ” 出 来 一 样 (或 浸入 其 中 )。 所 以 顶点 位 置 本 身 就 是 纹理 坐标 ! 通常 所 需 的 只 是 应 用 一 些 
简单 的 缩放 以 确保 对 象 的 顶点 的 位 置 坐标 映射 到 3D 纹理 坐标 的 范围 [0, 1]。 

由 于 我 们 通过 程序 来 生成 3D 纹理 ， 所 以 我 们 需要 一 种 从 生成 的 数据 中 构造 OpenGL 纹 
理 贴图 的 方法 。 将 数据 加 载 到 纹理 中 的 过 程 与 我 们 之 前 在 第 5.12 节 中 看 到 的 类 似 。 在 这 种 
情况 下 ， 我 们 用 颜色 值 填充 3D 数组 ， 然 后 将 它们 复制 到 纹理 对 象 中 。 

程序 14.4 展示 出 了 用 于 实现 所 有 先前 步骤 的 各 种 组 件 ， 以 便 使 用 程序 构建 的 3D 纹理 来 
纹理 化 具有 蓝 色 和 黄色 水 平 条 纹 的 对 象 。 所 需 的 图 案 在 generate3Dpattern() 函 数 中 构建 ， 该 
函数 将 图 案 存储 在 名 为 “tex3Dpattern” 的 数组 中 。 然 后 在 函数 fillDataArray(0 中 构建 “图 像 ” 
数据 ， 按 照 图 案 ， 该 函数 使 用 与 RGB Bits R, G. BAA 相对 应 的 字 节 数据 填充 3D 数组 ， 
每 个 数据 在 [0, 255] 范 围 内 。 然 后 将 这 些 值 复制 到 load3DTexture0) 函 数 中 的 纹理 对 象 中 。 


程序 14.4 3D 纹理 : 条 纹 图 案 


C++ / OpenGL 应 用 程序 : 


const int texHeight= 200; 
const int texWidth = 200; 
const int texDepth = 200; 
double tex3Dpattern[texWidth] [texHeight] [texDepth]; 


// 按照 由 generate3Dpattern () 构 建 的 图 案 ， 用 蓝 色 、 黄 色 的 RGB 值 来 填充 字 节 数组 
void fillDataArray(GLubyte data[ ]) { 
for (int i=0; i<texWidth; i++) { 
for (int j=0; j<texHeight; j++) { 
for (int k=0; k<texDepth; k++) { 
if (tex3Dpattern[i] [j][k] == 1.0) { 
// 黄色 
data [i* (texWidth*texHeight*4) 
data[i* (texWidth*texHeight*4) 
data [i* (texWidth*texHeight*4) 
data [i* (texWidth*texHeight*4) 
} 
else { 
// HE 
data [i* (texWidth*texHeight*4) + j*(texHeight*4)+ k*4+0] 
data[i*(texWidth*texHeight*4) + j*(texHeight*4)+ k*4+1] 
data [i*(texWidth*texHeight*4) + j*(texHeight*4)+ k*4+2] 
data[i*(texWidth*texHeight*4) + j*(texHeight*4)+ k*4+3] 


j* (texHeight*4)+ k*4+0] 
j* (texHeight*4)+ k*4+1] 
j* (texHeight*4)+ k*4+2] 
j* (texHeight*4)+ k*4+3] 


(GLubyte) 255; // red 

(GLubyte) 255; // green 
(GLubyte) 0; // blue 
(GLubyte) 255; // alpha 


+++ + 


"Se ow 


(GLubyte) 0; // red 

(GLubyte) 0; // green 
(GLubyte) 255; // blue 
(GLubyte) 255; // alpha 


| ou 


bE SK) 
// 构建 条 纹 的 3D 图 案 
void generate3Dpattern() { 
for (int x=0; x<texWidth; x++) { 
for (int y=0; y<texHeight; y++) { 
for (int z=0; z<texDepth; z++) { 
if ((y/10)%2 == 0) 
tex3Dpattern[x] [y][z] = 0.0; 
else 
tex3Dpattern[x] [y][z] = 1.0; 
Bod oh Tp 
// 将 顺序 字 节 数 据 数 组 加 载 进 纹理 对 象 
int load3DTexture() { 
GLuint textureID; 


222 第 14 章 其 他 技术 


GLubyte* data = new GLubyte[texWidth*texHeight*texDepth*4]; 
fillDataArray (data) ; 


glGenTextures(1, &textureID) ; 
glBindTexture (GL_TEXTURE 3D, textureID); 
glTexParameteri(GL_ TEXTURE 3D, GL TEXTURE MIN FILTER, GL LINEAR); 
glTexStorage3D(GL TEXTURE 3D, 1, GL RGBA8, texWidth, texHeight, texDepth) ; 
glTexSubImage3D(GL_TEXTURE 3D, 0, 0, 0, 0, texWidth, texHeight, texDepth, 
return textureID; 

} 


void init (GLFWwindow* window) { 


generate3Dpattern(); // 3D 图 案 和 纹理 只 加 载 一 次 ， 所 以 在 init () 里 作 
stripeTexture = load3DTexture(); // 为 3D 纹理 保存 整 型 图 案 ID 


} 


void display (GLFWwindow* window, double currentTime) { 


glActiveTexture (GL_TEXTUREO) ; 

glBindTexture (GL TEXTURE 3D, stripeTexture) ; 

glDrawArrays(GL TRIANGLES, 0, numObjVertices) ; 
} 


顶点 着 色 器 
out vec3 originalPosition; // 原始 模型 顶点 将 被 用 于 纹理 坐标 
layout (binding=0) uniform sampler3D s; 


void main(void) 
{ originalPosition = position; // 将 原始 模型 坐标 传递 ， 用 作 3D 纹理 坐标 
gl_Position = proj_matrix * mv matrix * vec4(position,1.0); 


} 

片段 着 色 器 

in vec3 originalPosition; // 接受 原始 模型 坐标 ， 用 作 3D 纹理 坐标 
out vec4 fragColor; 


layout (binding=0) uniform sampler3D s; 


void main (void) 

fragColor = texture(s, originalPosition/2.0 + 0.5); // 顶点 范围 为 [-1,+1] ， 纹 理 坐 标 范围 为 [0, 1] 

} 

在 C++/OpenGL 应 用 程序 中 , lo0ad3Dtexture() 函 数 将 生成 的 数据 加 载 到 3D 纹理 中 。 它 不 
使 用 SOIL2 来 加 载 纹理 ， 而 是 直接 进行 相关 的 OpenGL 调用 ， 其 方式 类 似 于 前 面 5.12 节 中 
所 述 的 方式 。 图 像 数 据 应 该 被 格式 化 为 对 应 于 RGBA 颜色 分 量 的 字 节 序列 。 函 数 
fillDataArray(0) 执 行 此 操作 , 应 用 黄色 和 蓝 色 的 RGB 值 , 依据 由 generate3Dpattern() 函 数 构建 
并 保存 在 tex3Dpattern 数组 中 的 条 带 图 案 。 男 请 注意 display() 函 数 中 指定 了 纹理 类 型 
GL TEXTURE 3D。 

由 于 我 们 希望 将 对 象 的 顶点 位 置 用 作 纹 理 坐 标 , 我 们 将 它们 从 顶点 着 色 器 传递 到 片段 着 
色 器 。 片 段 着 色 器 缩放 它们 ， 以 便 它 们 按照 纹理 坐标 的 标准 ， 被 映射 到 范围 [0，1]。 最 后 ， 
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通过 sampler3D 统一 变量 访问 3D 纹理 ， 该 统 
一 变量 采用 3 个 参数 而 不 是 两 个 参数 。 我 们 
使 用 顶点 的 原始 系 了 和 Zz 坐标 ,缩放 到 正确 
的 范围 ,以 访问 纹理 。 结 果 如 图 14.9 所 示 ( 见 
彩 插 )。 

通过 修改 generate3Dpattern() 可 以 生成 
更 复杂 的 图 案 。 图 14.10 显示 了 将 条 带 图 案 
转换 为 3D 棋盘 的 简单 更 改 ， 产 生 的 效果 如 
图 14.11 所 示 。 值 得 注意 的 是 ， 如 果 龙 的 表 
面 采用 2D 棋盘 纹理 图 案 进行 纹理 处 理 ， 效 
果 与 情况 则 大 不 相同 。( 见 习题 14.3。) 





void generate3Dpattern() 
{ int xStep, yStep, Step, sumSteps; 
for (int x=0; x<texWidth; x++) 
{ for (int y=0; y<texHeight; y++) 
{ for (int z=0; z<texDepth; z++) 
{ xStep = (x / 10) % 2; 
yStep = (y / 10) % 2; 
zStep = (z / 10) % 2; 
sumSteps = xStep + yStep + zStep; 
if ((sumSteps % 2) == 0) 
tex3Dpattern[x][y][z] = 0.0; 
else 
tex3Dpattern[x][y][z] = 1.0; 
}}}} 





图 14.10 ”生成 棋盘 3D 纹理 图 案 
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图 14.11 3D 棋盘 纹理 的 龙 


可 以 使 用 随机 性 或 噪声 来 模拟 许多 自然 现象 。 一 种 常见 的 技术 是 Perlin 嗓 声 中 ， 它 以 
Ken Perlin 命名 。Ken Perlin 在 1997 年 因 开 发 生成 和 使 用 2D 和 3D 噪声 的 实用 方法 而 获得 
奥斯卡 奖 。 “这 里 描述 的 程序 基于 Perlin 的 方法 。 


D 由 电影 艺术 与 科学 学 院 颁发 的 奥斯卡 技术 成 就 奖 ， 


224 第 14 章 ”其 他 技术 


图 形 场景 中 存在 许多 噪声 应 用 。 一 些 常 见 的 例子 是 云 、 地 形 、 木 纹 、 矿 产 ( 如 大 理 石 中 的 
矿脉 )、 烟 雾 、 燃 烧 、 火 焰 、 行 星 表 面 和 随机 运动 。 在 本 节 中 ， 我 们 将 重点 关注 生成 包含 噪声 
的 3D 纹理 ， 然 后 使 用 噪声 数据 生成 复杂 材质 〈 如 大 理 石和 木材 )， 并 模拟 动画 云 纹 理 以 用 于 
立方 体贴 图 或 天 幕 。 包 含 噪声 的 空间 数据 〈 例 如 2D 或 3D) 的 集合 有 时 被 称 为 噪声 图 。 

我 们 首先 从 随机 数据 中 构建 3D 纹理 贴图 。 这 可 以 使 用 上 一 节 中 显示 的 函数 完成 ， 只 需 
进行 一 些 修改 。 首 先 ， 我 们 使 用 以 下 更 简单 的 generateNoiseO 函 数 替 换 程序 14.4 中 的 
generate3 Dpattern() Pi 2: 


#include <random>; 
double noise [noiseWidth] [noiseHeight] [noiseDepth] ; 


void generateNoise() { 
for (int x=0; x<noiseWidth; x++) { 
for (int y=0; y<noiseHeight; y++) { 
for (int z=0; z<noiseDepth; z++) { 
noise[x][y][z] = (double) rand() / (RAND MAX + 1.0); // 计算 出 [0. . .1] 范 围 内 的 
// 一 个 double 类 型 数值 
ERE 


接 下 来 ， 修 改 程序 14.4 中 的 flDataArray0) 函 数 ， 以 便 将 噪声 数据 复制 到 字 节 数组 中 ， 
以 便 加 载 到 纹理 对 象 中 ， 如 下 所 示 。 
void fillDataArray(GLubyte data[ ]) { 
for (int i=0; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=0; k<noiseDepth; k++) { 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+0] = 
(GLubyte) (noise{i][j]{k] * 255); 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+1] = 
(GLubyte) (noise[i][j][k] * 255); 
data [i* (noiseWidth*noiseHeight*4) + j* (noiseHeight*4)+k*4+2] = 
(GLubyte) (noise[i][j][k] * 255); 
data[i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+3] = 
(GLubyte) 255; 
ae ae a 
程序 14.4 的 其 余部 分 ， 用 于 将 数据 加 载 
到 纹理 对 象 并 将 其 应 用 于 模型 ， 依 然 保持 不 
变 。 我 们 可 以 通过 将 它 应 用 于 我 们 的 简单 立 
方 体 模 型 来 查看 这 个 3D 噪声 图 ， 如 图 14.12 
所 示 。 在 此 示例 中 ，noiseHeight = noiseWidth 
= noiseDepth = 256. 
这 是 一 个 3D 噪声 图 , 虽然 它 不 是 非常 有 
用 《因为 它 太 嘲 杂 了 ， 很 难 有 很 多 实际 应 
用 )。 为 了 制作 更 实用 、 更 可 调 的 噪声 模式 ， 
我 们 将 使 用 不 同 的 噪声 生成 过 程 替 换 
fillDataArray() Pi žit. 
假设 我 们 使 用 整数 除法 作为 索引 ， 通 过 图 14.12 3D 噪声 数据 纹理 的 立方 体 
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“放大 ” 填充 数据 数组 到 图 14.12 所 示 的 噪声 图 的 一 小 部 分 。 对 fIDataArray0 函 数 的 修改 
如 下 所 示 。 根 据 用 于 除法 索引 的 “缩放 ”因子 ， 可 以 使 得 到 的 3D 纹理 更 多 或 少 地 呈现 “ 块 
1K”. 在 图 14.13 中 ， 纹 理 显 示 了 放大 的 结果 ， 将 索引 分 别 除 以 缩放 因子 8、16 和 32 (ME 
BA). 





图 14.13 不同“ 缩放 ”因子 的 “ 块 状 ”3D 噪声 图 


void fillDataArray(GLubyte data[ ]) { 
int zoom = 8; // 缩放 因子 
for (int i=0; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=0; k<noiseDepth; k++) { 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4) +k*4+0] = 
(GLubyte) (noise [i/zoom] [j/zoom] [k/zoom] * 255); 
data[i* (noiseWidth*noiseHeight*4) + j* (noiseHeight*4)+k*4+1] = 
(GLubyte) (noise [i/zoom] [j/zoom] [k/zoom] * 255); 
data[i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+2] = 
(GLubyte) (noise [i/zoom] [j/zoom] [k/zoom] * 255); 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+3] = (GLubyte) 255; 
TEY} 


通过 从 每 个 离散 灰 度 颜色 值 插值 到 下 一 个 灰 度 颜色 值 , 我 们 可 以 平滑 特定 的 噪声 图 内 的 
“ 块 效应 ”。 也 就 是 说 ， 对 于 给 定 3D 纹理 内 的 每 个 小 “ 块 ”， 我 们 通过 从 其 颜色 到 其 相 邻 块 
的 颜色 进行 插值 来 设置 块 内 的 每 个 纹 素 的 颜色 。 插 值 代码 在 下 面 所 示 的 函数 smoothNoise() 
中 ， 还 有 修改 后 的 fllDataArray() 函 数 。 图 14.14 所 示 的 是 得 到 的 “平滑 ”纹理 (分 别 是 缩 
放 因 子 2、4、8、16、32 和 64 一 一 从 左 到 右 ， 从 上 到 下 )。 请 注意 , 缩放 因子 现在 是 一 个 double 
类 型 量 ， 因 为 我 们 需要 小 数 分 量 来 确定 每 个 纹 素 的 插值 灰 度 值 。 
void fillDataArray(GLubyte data[ ]) { 
double zoom = 32.0; 
for (int i=0; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=0; k<noiseDepth; k++) { 


data[i* (noiseWidth*noiseHeight*4) + j*(nmoiseHeight*4) + k*4 +0] = 
(GLubyte) (smoothNoise(i/zoom, j/zoom, k/zoom) * 255); 
( 
( 


ii 


data [i* (noiseWidth*noiseHeight*4) + j*(noiseHeight*4) + k*4 +1] 
GLubyte) (smoothNoise(i/zoom, j/zoom, k/zoom) * 255); 

data [i* (noiseWidth*noiseHeight*4) + j*(noiseHeight*4) + k*4 +2] 
(GLubyte) (smoothNoise(i/zoom, j/zoom, k/zoom) * 255); 

data[i* (noiseWidth*noiseHeight*4) + j*(noiseHeight*4) + k*4 +3] = (GLubyte) 255; 
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double smoothNoise(double xl, double yl, double z1) { 
// xis yl 和 zl 的 小 数 部 分 (对 于 当前 纹 素 ， 从 当前 块 到 下 一 个 块 的 百分比 》 
double fractX = xl - (int) x1; 
double fractY = yl - (int) yl; 
double fractZ = zl - (int) z1; 


// 在 X、Y 和 2 方向 上 的 相 邻 像素 的 索引 


int x2 = ((int)x1 + noiseWidth + 1) % noiseWidth; 
int y2 = ((int)yl + noiseHeight + 1) % noiseHeight; 
int z2 = ((int)zl + noiseDepth + 1) % noiseDepth; 


// 通过 按照 3 个 轴 方向 插值 灰 度 ， 平 滑 噪声 


double value = 0.0; 





value += (l-fractX) * (1-fractY) * (1-fractZ) * noise[(int)x1] [(int) yl] [(int)z1]; 
value += (l-fractX) * fractY * (1-fraetZ) * noise[(int) x1] T (int}y2) (ant) zi); 
value += fractX * {1-fractY) * (1-fractZ) * noise[(int)x2] [ (int) yl] [ (int) zl 

value += fractX * fractY * (1-fractZ) * noise[(int)x2] [ (int) y2] [(int)z1]; 
value += (1-fractX) * (1-fractyY) * fractZ * noise[ (int) x1] [(int) yl] [(int)z2]; 
value += (l-fractX) * fractY * fractZ * noise[(int)x1] [ (int) y2] [ (int) z2]; 
value += fractX * (1-fractY) * fractZ * noise[ (int) x2] [ (int) yl] [ (int) z2]; 
value += fractX * fractY * fractZ * noise[ (int) x2] [ (int) y2] [ (int) z2]; 























return value; 





图 14.14 在 各 种 缩放 级 别 平 滑 3D 纹理 


smoothNoise() 函 数 通过 计算 相应 原始 “ 块 状 ”噪声 图 中 纹 素 周 围 的 8 个 灰 度 值 的 加 权 平 
均值 来 计算 给 定 噪 声 图 的 平滑 版 本 中 的 每 个 纹 素 的 灰 度 值 。 也 就 是 说 ， 它 平均 纹 素 所 在 的 
小 “ 块 ” 的 8 个 顶点 处 的 颜色 值 。 这 些 “ 邻 居 ” 颜 色 中 的 每 一 个 的 权重 基于 纹 素 与 其 每 个 
邻居 的 距离 ， 并 归 一 化 到 范围 [0...1]。 

接 下 来 ， 组 合 各 种 缩放 因子 的 平滑 噪声 图 。 创 建 一 个 新 的 噪声 图 ， 其 中 每 个 纹 素 由 另 一 
个 加 权 平 均值 形成 ， 这 次 基于 每 个 “平滑 ”噪声 图 中 相同 位 置 的 纹 素 的 总 和 ， 其 中 缩放 因 
子 用 作 权 重 。 这 种 效应 被 Perlin PPAR “HTL”, 尽管 它 与 通过 求 和 各 种 波形 产生 的 谐 波 
实际 上 更 为 密切 相关 。 新 的 turbulence) KA fillDataArrayO 的 修改 版 本 指定 了 一 个 噪声 图 ， 
该 图 对 缩放 级 别 1 一 32 (2 的 各 次 震 ) 进行 求 和 ， 如 下 所 示 。 其 中 还 显示 了 以 此 产生 的 噪声 
图 在 立方 体 上 贴图 的 结果 。 


double turbulence(double x, double y, double z, double maxZoom) { 
double sum = 0.0, zoom = maxZoom; 
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while (zoom >= 1.0) { // 最 后 一 遍 是 当 zoom = 1 时 
// 计算 平滑 后 的 噪声 图 的 加 权 和 
sum = sum + smoothNoise(x / zoom, y / zoom, z / zoom) * zoom; 
zoom = zoom / 2.0; // 对 每 个 2 的 寡 的 缩放 因子 
} 
sum = 128.0 * sum / maxZoom; // 对 不 大 于 64 的 maxZoom 值 , 保证 RGB < 256 
return sum; 
} 


void fillDataArray(GLubyte data[ ] ) { 
double maxZoom = 32.0; 
for (int i=0; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=0; k<noiseDepth; k++) { 
data[i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+0] = 
(GLubyte) turbulence(i, j, k, maxZoom) ; 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+1] = 
(GLubyte) turbulence(i, j, k, maxZoom) ; 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+2] = 
(GLubyte) turbulence(i, j, k, maxZoom); 
data[i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4) +k*4+3] 
(GLubyte) 255; 


Poth 


3D 噪声 图 (如 图 14.15 所 示 ) 可 用 于 各 种 富有 想象 力 的 应 用 。 在 接 下 来 的 部 分 中 ,我 们 
将 使 用 它们 来 生成 大 理 石 、 木 材 和 云 。 可 以 通过 放大 级 别 的 不 同 组 合 来 调整 噪声 的 分 布 。 





图 14.15 “ 满 流 ”噪声 的 3D 纹理 贴图 


14.6 ”噪声 应 用 一 一 大 理 石 


通过 修改 噪声 图 并 使 用 适当 的 ADS 材料 添加 Phong 照明 ， 我 们 可 以 使 龙 模 型 看 起 来 像 
一 块 大 理 石 般 的 石头 ， 如 图 7.3 所 示 。 

我 们 首先 生成 一 个 条 纹 图 案 ， 有 点 类 似 于 本 章 前 面 的 “条 纹 ” 示 例 一 一 新 条 纹 与 之 前 的 条 
纹 不 同 ， 首 先是 因为 它们 是 对 角 线 ， 还 因为 它们 是 由 正弦 波 产生 的 ， 因 此 边缘 是 模糊 的 。 然 
后 ， 我 们 使 用 噪声 图 来 扰动 这 些 线 ， 将 它们 存储 为 灰 度 值 。fillDataArray() 函 数 的 更 改 如 下 : 
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void fillDataArray(GLubyte data[ ]) { 
double veinFrequency = 2.0; 
double turbPower = 1.5; 
double maxZoom = 64.0; 
for (int i=0; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=0; k<noiseDepth; k++) { 
double xyzValue = (float)i / noiseWidth + (float)j / noiseHeight + (float)k / 
noiseDepth + turbPower * turbulence(i,j,k,maxZoom) / 256.0; 
double sineValue = abs(sin(xyzValue * 3.14159 * veinFrequency) ); 


float redPortion = 255.0f * (float) sineValue; 
float greenPortion = 255.0f * (float) sineValue; 
float bluePortion = 255.0f * (float)sineValue; 


data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+0] = (GLubyte) redPortion; 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+1] = (GLubyte) greenPortion; 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+2] = (GLubyte) bluePortion; 
data [i* (noiseWidth*noiseHeight*4) +}* (noiseHeight*4)+k*4+3] = (GLubyte) 255; 


hy KI 


变量 veinFrequency 用 于 调整 条 纹 数 量 ，turbSize Va RAE ma Tt AY EAD AY Aa A BL, 
turbPower 调整 条 纹 中 的 扰动 量 (将 其 设置 为 0， 使 条 纹 不 受 干扰 )。 由 于 相同 的 正弦 波 值 用 
于 所 有 3 个 (RGB) 颜色 分 量 , 所 以 存储 在 图 像 数据 阵列 中 的 最 终 颜色 是 灰 度 级 的 。 图 14.16 
显示 了 各 种 turbPower 值 (0.0、5.5、1.0 和 1.5， 从 左 到 右 ) 的 结果 纹理 贴图 。 





14.16 构建 3D“ 大 理 石 ” =. 


由 于 我 们 希望 大 理 石 具有 闪 亮 的 外 观 ， 我 们 采用 Phong 着 色 使 得 “大 理 石 ”纹理 物体 看 
起 来 令 人 信服 。 程 序 14.5 总 结 了 生成 大 理 石 龙 的 代码 。 除 了 我 们 还 传递 了 原始 顶点 坐标 以 
用 作 3D 纹理 坐标 (如 前 所 述 )， 顶 点 和 片段 着 色 器 与 用 于 Phong 着 色 的 相同 。 片 段 着 色 器 
使 用 前 面 7.6 节 中 描述 的 技术 将 噪声 结果 与 光照 结果 结合 。 


程序 14.5 ”构建 大 理 石 龙 
C++ / OpenGL 应 用 程序 : 


// 用 于 Phong 着 色 的 白光 ADS 设置 

float globalAmbient [4] = {0.5f, 0.5f, 0.5f, 1.0f}; 
float lightAmbient [4] = {0.0f, 0.0f, 0.0f, 1.0f}; 

float lightDiffuse[4] = {1.0f, 1.0f, 1.0f, 1.0f}; 

float lightSpecular[4] = {1.0f, 1.0f, 1.0f, 1.0f£}; 
float matShi = 75.0f; 


void init (GLFWwindow* window) { 


generateNoise() ; 
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noiseTexture = load3DTexture(); // 和 程序 14. 4 一样 ， 负 责 调用 fillDataArray () 
} 


void fillDataArray(GLubyte data[ ]) { 
double veinFrequency = 1.75; 
double turbPower = 3.0; 
double turbSize = 32.0; 
// 剩 下 部 分 构建 大 理 石 噪 声 图 的 和 之 前 的 一 样 


} 

顶点 着 色 器 

// 和 程序 14.4 一 样 
片段 着 色 器 
0 


iets 
// 模型 顶点 取 值 [-1.5，+1.5] ， 纹 理 坐 标 取 值 [0，1 


vec4 texColor = texture(s, originalPosition / 3.0 + 0.5); 


fragColor = 
0.7 * texColor * (globalAmbient + light.ambient + light.diffuse * max(cosTheta,0.0) ) 
+ 0.5 * light.specular * pow(max(cosPhi, 0.0), material.shininess) ; 
} 


有 多 种 方法 可 以 模拟 不 同 颜色 的 大 理 石 〈 或 其 他 石材 )。 改 变 大 理 石 中 “矿脉 ”颜色 的 
一 种 方法 是 修改 fllDataArray(0) 函 数 中 Color 变量 的 定义 ， 例 如 ， 通 过 增加 绿色 成 分 : 
float redPortion = 255.0f * (float) sineValue; 


float greenPortion = 255.0f * (float)min(sineValue*1.5 - 0.25, 1.0); 
float bluePortion = 255.0f * (float) sineValue; 


我 们 还 可 以 引入 ADS 材料 值 [ 即 在 init) PRE] 来 模拟 完全 不 同类 型 的 石头 ， 例 如 
EA fF 

图 14.17 (WLR) 显示 了 4 个 示例 ， 前 3 个 使 用 程序 14.5 所 示 的 设置 ， 第 四 个 示例 包 
含 前 面 图 7.3 所 示 的 “jade”ADS 材料 值 。 





图 14.17 3D 噪声 图 纹理 的 龙 一 一 3 个 大 理 石和 1 个 玉 质 
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14.7 噪声 应 用 一 一 木材 


创建 “木材 ”纹理 可 以 采用 与 之 前 “大 理 石 ”示例 中 类 似 的 方式 。 树 木 按照 年 轮 生 长 ， 
正 是 这 些 年 轮 成 了 我 们 在 用 木头 制 成 的 物体 中 看 到 的 “ 木 纹 ”。 随 着 树木 的 生长 ， 环 境 压 力 
会 在 年 轮 中 产生 变化 ， 我 们 也 会 在 木 纹 中 看 到 这 种 变化 。 

我 们 首先 构建 一 个 程序 性 的 “年 轮 ”3D 纹理 贴图 ， 类 似 于 本 章 前 面 的 “棋盘 格 ”。 然 后 ， 
我 们 使 用 噪声 图 来 扰动 这 些 年 轮 ， 将 深 色 和 浅 棕色 插入 年 轮 纹理 贴图 中 。 通 过 调整 年 轮 的 数 
量 以 及 扰动 年 轮 的 程度 ， 我 们 可 以 用 各 种 类 型 的 木 纹 模拟 木材 。 标 色 的 色调 可 以 通过 组 合 相 
似 数量 的 红色 和 绿色 、 少 量 蓝 色 来 制作 。 然 后 ， 我 们 应 用 具有 低 “ 光 泽 ” 的 Phong 着 色 。 

我 们 可 以 通过 修改 fillDataArray() 函 数 来 生成 环绕 我 们 3D 纹理 贴图 中 Z 轴 的 年 轮 , 使 用 
三 角 函 数 指定 与 Z 轴 等 距 的 和 了 值 。 我 们 使 用 正弦 波 循环 重复 此 过 程 ， 根 据 此 正弦 波 均 
匀 地 升 高 和 降低 红色 和 绿色 成 分 ， 以 产生 不 同 的 棕色 调 。 变 量 sineValue 保持 精确 的 色调 ， 可 
以 通过 稍微 偏 移 一 个 分 量 或 男 一 个 分 量 来 调整 (在 这 种 情况 下 ， 将 红色 增加 80， 将 绿色 增加 
30)。 我 们 可 以 通过 调整 xyPeriod 的 值 来 创建 更 多 CRED) 的 年 轮 。 得 到 的 纹理 如 图 14.18 
Bras HAZE» 





void fillDataArray(GLubyte data[ ]) { 
double xyPeriod = 40.0; 
for (int i=0; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=0; k<noiseDepth; k++) { 

double xValue = (i - (double)noiseWidth/2.0) / (double) noiseWidth; 
double yValue = (j - (double)noiseHeight/2.0) / (double)noiseHeight; 
double distanceFromZ = sqrt(xValue * xValue + yValue * yValue) 
double sineValue = 128.0 * abs(sin(2.0 * xyPeriod * distanceFromZ * 3.14159)); 


float redPortion = (float) (80 + (int) sineValue) ; 
float greenPortion = (float) (30 + (int)sineValue) ; 
float bluePortion = 0.0f; 


data[i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+0] = (GLubyte) redPortion; 

data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+1] = (GLubyte) greenPortion; 

data[i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+2] = (GLubyte) bluePortion; 

data[i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+3] = (GLubyte) 255; 
TER 





K 14.18 为 3D 木材 纹理 创建 年 轮 
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图 14.18 中 的 木质 年 轮 环 是 一 个 很 好 的 开始 , 但 它们 看 起 来 不 太 通 真一 一 它们 太 完 美 了 。 
为 了 改善 这 一 点 ， 我 们 使 用 噪声 图 〈 更 具体 地 说 ， 是 滑 流 ) 来 扰动 distanceFromZ 变量 ， 使 
得 环 具 有 轻微 的 变化 。 计 算 修 改 如 下 : 


double distanceFromZ = sqrt(xValue * xValue + yValue * yValue) 
+ turbPower * turbulence(i, j, k, maxZoom) / 256.0; 


同样 ， 变 量 turbPower 调整 应 用 了 多 少 消 流 〈 将 其 设置 为 0.0， 产 生 图 14.18 所 示 的 未 受 
干扰 的 版 本 )， 并 且 maxZoom 指定 缩放 值 〈 在 此 示例 中 为 32)。 图 14.19 显示 了 turbPower 
值 0.05、1.0 和 2.0 MERA) 得 到 的 木材 纹理 。 





图 14.19 “木材 ”3D 纹理 贴图 与 噪声 地 图 扰动 的 年 轮 


我 们 现在 可 以 将 3D 木材 纹理 贴图 应 用 于 模型 。 通 过 对 用 于 纹理 坐标 的 originalPosition 
顶点 位 置 应 用 旋转 ， 可 以 进一步 增强 纹理 的 真实 感 ， 这 是 因为 用 木头 雕刻 的 大 多 数 物 品 与 
年 轮 的 方向 不 完全 对 齐 。 为 此 ， 我 们 向 着 色 器 发 送 一 个 额外 的 旋转 矩阵 ， 以 旋转 纹理 坐标 。 
我 们 还 添加 了 Phong 着 色 ， 具 有 适当 的 木 色 ADS 值 和 适度 的 光泽 度 。 创 建 “ 木 质 海豚 ”的 
完整 代码 补充 和 更 改 见 程序 14.6。 


程序 14.6 ”构建 木质 海豚 


C++ / OpenGL 应 用 程序 : 





glm: :mat4 texRot; 


// 木质 材质 (棕色) 

float matAmbient [4] (O55, EE 

float matDiffuse[4] TOS Dr SE 1. 08} 

float matSpecular[4] = {0.5f, 0.35f, 0.15f, 1.0f}; 
float matShi = 15.0f; 


void init (GLFWwindow* window) { 


// 旋转 应 用 于 纹理 坐标 一 一 增加 额外 的 木 纹 变化 
texRot = glm::rotate(glm::mat4(1.0f), toRadians (20.0f), glm::vec3(0.0f, 1.0f, 0.0f)); 
} 


void fillDataArray (GLubyte data[ ]) { 
double xyPeriod = 40.0; 
double turbPower = 0.1; 
double maxZoom = 32.0; 
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for (int i=0; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=0; k<noiseDepth; k++) { 
double xValue = (i - (double)noiseWidth/2.0) / (double)noiseWwidth; 
double yValue = (j - (double)noiseHeight/2.0) / (double) noiseHeight; 
double distanceFromZ = sqrt(xValue * xValue + yValue * yValue) 
+ turbPower * turbulence(i, j, k, maxZoom) / 256.0; 
double sineValue = 128.0 * abs(sin(2.0 * xyPeriod * distanceFromZ * Math.PI)); 


float redPortion = (float) (80 + (int)sineValue); 
float greenPortion = (float) (30 + (int)sineValue) ; 
float bluePortion = 0.0f; 


data [i* (noiseWidth*noiseHeight*4) + j* (noiseHeight*4)+k*4+0] = (GLubyte) redPortion; 
data [i* (noiseWidth*noiseHeight*4) +}* (noiseHeight*4)+k*4+1] = (GLubyte) greenPortion; 
data [i* (noiseWidth*noiseHeight*4) +}* (noiseHeight*4)+k*4+2] = (GLubyte) bluePortion; 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+3] = (GLubyte) 255; 

} teh 


void display(GLFWwindow* window, double currentTime) { 


tLoc = glGetUniformLocation(renderingProgram, "texRot"); 
glUniformMatrix4fv(tLoc, 1, false, glm::value_ptr(texRot)); 


} 


顶点 着 色 器 
uniform mat4 texRot; 


void main(void) 
A iets, 
originalPosition = vec3(texRot * vec4(position,1.0)) .xyz; 


} 
片段 着 色 器 
void main(void) 


re 
uniform mat4 texRot; 


// 将 光照 和 3D 纹理 结合 
fragColor = 
CS i ate se) 
+ 
0.5 * texture(s,originalPosition / 2.0 + 0.5); 
} 


3D 材质 的 木质 海豚 如 图 14.20 所 示 。 

片段 着 色 器 中 还 有 一 个 值得 注意 的 细节 。 由 于 我 们 在 3D 纹理 内 旋转 模型 ， 所 以 有 时 可 
E 会 导致 顶点 位 置 因 旋 转 而 移动 超出 所 需 的 [0...1] 纹 理 坐 标 范围 。 如 果 发 生 这 种 情况 ， 我 们 
可 以 通过 将 原始 顶点 位 置 除 以 更 大 的 数字 (例如 4.0 而 不 是 2.0) 来 调整 这 种 可 能 性 ， 然 后 
添加 稍 大 一 些 的 数字 (例如 0.6〉 以 使 其 在 纹理 空间 中 居中 。 
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图 14.20 “木材 ”3D 噪声 图 纹理 的 海豚 


14.8 ”噪声 应 用 一 云 


前 面 图 14.15 中 构建 的 “ 满 流 ”噪声 图 看 起 来 有 点 像 云 。 当 然 ， 它 不 是 正确 的 颜色 ， 所 
以 我 们 首先 将 它 从 灰 度 变 为 适当 的 浅 蓝 色 和 白色 混合 。 一 种 直接 的 方法 是 为 蓝 色 分 量 指定 
一 个 最 大 值 为 1.0 的 颜色 ， 为 红色 和 绿色 分 量 指定 0.0~1.0 的 变化 (但 相等 的 ) 值 ， 具 体 取 
决 于 噪声 图 中 的 值 。 新 的 fillIDataArray() 函 数 如 下 : 


void fillDataArray(GLubyte data[ ]) { 
for (int i=0; i<noiseWidth; i++) { 
for (int j=0; j<noiseHeight; j++) { 
for (int k=0; k<noiseDepth; k++) { 

float brightness = 1.0f - (float) turbulence(i,j,k,32) / 256.0f; 
float redPortion = brightness*255.0f; 
float greenPortion = brightness*255.0f; 
float bluePortion = 1.0£*255.0f; 
data[i* (noiseWidth*noiseHeight*4) +}* (noiseHeight*4)+k*4+0] = (GLubyte) redPortion; 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4) +k*4+1] (GLubyte) greenPortion; 
data [i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4) +k*4+2] (GLubyte) bluePortion; 
data[i* (noiseWidth*noiseHeight*4) +j* (noiseHeight*4)+k*4+3] = (GLubyte) 255; 


beet 


生成 的 蓝 色 版 本 的 噪声 图 现在 可 用 于 纹理 化 天 幕 。 回 想 一 下 , 天 幕 是 一 个 球体 或 半球 体 ， 
在 禁用 深度 测试 的 情况 下 被 纹理 化 和 泻 染 ， 并 放置 使 其 围绕 相机 《类 似 于 天 空 盒 )。 

构建 天 幕 的 一 种 方法 是 使 用 顶点 坐标 作为 纹理 坐标 ， 以 与 我 们 对 其 他 3D 纹理 相同 的 
方式 对 其 进行 纹理 化 。 然 而 ， 在 这 种 情况 下 ， 事 实证 明 使 用 天 幕 的 2D 纹理 坐标 会 产生 看 
起 来 更 像 云 的 图 案 , 因为 球面 扭曲 会 略微 拉 伸 纹理 贴图 。 我 们 可 以 通过 将 GLSL 的 texture() 
调用 中 的 第 三 维 设置 为 常量 值 来 从 噪声 图 中 获取 2D 切片 。 假 设 天 幕 的 纹理 坐标 已 经 以 标 
准 方 式 发 送 到 顶点 属性 中 的 OpenGL 管线 ， 下 面 的 片段 着 色 器 使 用 噪声 图 的 2D 切片 对 其 
进行 纹理 化 : 

#version 430 

in vec2 tc; 

out vec4 fragColor; 

uniform mat4 mv_matrix; 


uniform mat4 proj matrix; 
layout (binding=0) uniform sampler3D s; 
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void main(void) 
{ fragColor = texture(s,vec3(tc.x, tc.y, 0.5)); // 常量 替代 了 tc.z 
} 


得 到 的 纹理 化 天 幕 如 图 14.21 所 示 ( 见 彩 
揪 )。 虽 然 相 机 通常 被 放置 在 天 幕 内 ， 但 我 们 
在 外 面 使 用 相机 进行 泻 染 ， 因 此 可 以 看 到 圆 
顶 本 身 的 效果 。 当 前 的 噪声 图 导致 云 “ 看 起 
来 模糊 不 清 ”。 

虽然 我 们 的 腾 胱 云 看 起 来 不 错 ， 但 我 们 
希望 能 够 塑造 它们 一 一 也 就 是 说 ， 让 它们 更 
多 或 更 少 腊 胱 。 一 种 方法 是 修改 turbulence() 
函数 , 使 其 使 用 指数 (如 logistic HA), Cit 图 14.21 BREESE INA 
云 看 起 来 更 “明显 ”。 修 改 后 的 turbulence() 函 数 以 及 相关 的 logistic0 函 数 如 程序 14.7 所 示 。 
完整 的 程序 14.7 还 包含 前 面 描述 的 smoothO0、flDataArray0 和 generateNoise() 函 数 。 





程序 14.7 ZABER 
C++ / .OpenGL 应 用 程序 : 


double turbulence (double x, double y, double z, double size) { 

double value = 0.0, initialSize = size, cloudQuant; 

while(size >= 0.9) { 
value = value + smoothNoise(x/size, y/size, z/size) * size; 
size = size / 2.0; 

} 

cloudQuant = 110.0; // 可 微调 的 云 质 量 

value = value / initialSize; 

value = 256.0 * logistic(value * 128.0 - cloudQuant); 

return value; 


} 


double logistic(double x) { 
double k = 0.2; // PURE) Zs RARE, PAE BE BED HY BA A FE 
return (1.0 / (1.0 + pow(2.718, -k*x))); 

} 


Logistic 函数 使 颜色 更 倾向 于 白色 或 蓝 色 , 而 
不 是 介 于 两 者 之 间 的 值 ， 从 而 产生 具有 更 多 不 同 
云 边界 的 视觉 效果 。 变量 cloudQuant 调整 噪声 图 
中 白色 〈 相 对 于 蓝 色 ) 的 相对 量 ， 这 反 过 来 导致 
当 应 用 logistic 函数 时 产生 更 多 (或 更 少 ) 的 白 
色 区 域 ( 即 不 同 的 云 )。 由 此 产生 的 天 幕 现在 具 
有 更 明显 的 云层 ， 如 图 14.22 Bras (WA). 

最 后 ， 真 正 的 云 不 是 静态 的 。 为 了 增强 云 的 
真实 感 ， 我 们 应 该 通过 以 下 方式 使 它们 变 得 生 图 14.22 ”指数 云 纹理 的 天 幕 





GD “logistic” (EÈ “sigmoid”) 函数 具有 S 形 曲 线 ， 两 端 都 有 渐 近 线 。 常 见 的 例子 是 双 曲 正切 函数 和 fx) = 1/(1+e-x)。 它 们 有 
时 也 被 称 为 “ 挤 压 ”函数 。 
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动 : Ca) 使 它们 随 着 时 间 的 推移 而 移动 或 “漂移 ”;(b) 随 着 它们 漂移 逐渐 改变 它们 的 形状 。 

使 云 “漂移 ”的 一 种 简单 方法 是 缓慢 旋转 天 幕 。 这 不 是 一 个 完美 的 解决 方案 ， 因 为 真实 
的 云 往往 会 沿 着 直线 方向 漂移 ， 而 不 是 围绕 观察 者 旋转 。 但 是 ， 如 果 旋 转 缓慢 且 云 只 是 用 
于 装饰 场景 ， 则 效果 可 能 是 足够 的 。 

随 着 云 的 漂移 ， 云 逐渐 变化 ， 起 初 可 能 看 起 来 很 棘手 。 然 而 ， 考 虑 到 我 们 用 于 纹理 云 的 
3D 噪声 图 ， 实 际 上 有 一 种 非常 简单 而 聪明 的 方法 来 实现 这 种 效果 。 回 想 一 下 ， 虽 然 我 们 为 
云 构 建 了 一 个 3D 纹理 噪声 图 ， 但 到 目前 为 止 我 们 只 使 用 了 它 的 一 个 “切片 ” 跟 天 幕 的 2D 
纹理 坐标 相交 (我 们 将 纹理 查找 的 Z 坐标 设置 为 一 个 常量 值 )。 到 目前 为 止 ，3D 纹理 的 其 
余部 分 尚未 使 用 。 

我 们 的 技巧 是 将 纹理 查找 的 常量 Z 坐标 替换 为 随时 间 逐 渐变 化 的 变量 。 也 就 是 说 ， 当 我 
们 旋转 天 幕 时 ， 我 们 逐渐 增加 深度 变量 ， 导 致 纹理 查找 使 用 不 同 的 切片 。 回 想 一 下 ， 当 我 们 
构建 3D 纹理 贴图 时 , 我 们 将 平滑 应 用 于 沿 3 个 轴 的 颜色 变化 。 因 此 ， 纹 理 贴 图 中 的 相 邻 切片 
非常 相似 ， 但 略 有 不 同 。 因 此 ， 通 过 逐渐 改变 texture0 调 用 中 的 Z 值 ， 云 的 外 观 将 逐渐 改变 。 

代码 更 改 导 致 云 缓慢 移动 并 随时 间 变 化 ， 如 程序 14.8 所 示 。 


程序 14.8 ”动画 云 纹理 
C++ / OpenGL 应 用 程序 : 


double rotAmt = 0.0; // 用 来 让 云 看 起 来 漂移 的 Y 轴 旋 转 量 
float depth = 0.01f; // 30 噪声 图 的 深度 查找 ， 用 来 使 云 逐 渐变 化 


void display (GLFWwindow* window, double currentTime) { 
// 逐渐 旋转 天 幕 
mMat = glm::translate(glm::mat4(1.0f), glm::vec3(domeLocX, domeLocY, domeLocZ) ; 


rotAmt += 0.02; 
mMat = glm::rotate(mMat, rotAmt, glm::vec3(0.0f, 1.0f£, 0.0£)); 


// 逐渐 修改 第 三 个 纹理 坐标 ， 以 使 云 变化 

dLoc = glGetUniformLocation(program, "d"); 

depth += 0.00005f; 

if (depth >= 0.99f) depth = 0.01f; // 当 我 们 到 达 纹 理 贴图 的 终点 时 返回 开头 
glUniformlf(dLoc, depth); 


} 


片段 着 色 器 


#version 430 


in vec2 tc; 
out vec4 fragColor; 


uniform mat4 mv_matrix; 
uniform mat4 proj matrix; 
uniform float d; 


layout (binding=0) uniform sampler3D s; 
void main(void) 


{ fragColor = texture(s, vec3(tc.x, tc.y, d)); // 逐渐 改变 的 "qa" 替换 前 面 的 常量 
} 
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虽然 我 们 无 法 在 单个 静止 图 像 中 显示 逐渐 改变 漂移 和 动画 的 云 的 效果 ， 但 图 14.23 显示 
T 3D 生成 云 的 一 系列 快照 中 的 这 些 变化 ， 因 为 它们 从 右 到 左 漂移 在 天 幕 上 ， 并 在 漂移 时 组 
慢 改 变形 状 。 





spreta iee Y — Dh X ; “ 
A 14.23 3D 云 在 漂移 时 改变 


14.9 ”只 声 应 用 一 一 特殊 效果 


噪声 纹理 可 用 于 各 种 特殊 效果 。 事 实 上 ， 有 许多 可 能 的 用 途 ， 其 适用 性 仅 受 到 想象 力 的 
限制 。 

我 们 将 在 此 展示 的 一 个 非常 简单 的 特殊 效应 是 溶解 效应 。 我们 使 物体 看 起 来 逐渐 溶解 成 
小 颗粒 ， 直 到 它 最 终 消 失 。 给 定 3D 噪声 纹理 ， 可 以 使 用 非常 少 的 附加 代码 实现 此 效果 。 

为 了 促进 溶解 效果 ， 我 们 引入 了 GLSL 的 discard 命令 。 此 命令 仅 在 片段 着 色 器 中 是 合 
法 的 ， 并 且 在 执行 时 ， 它 会 导致 片段 着 色 器 丢弃 当前 片段 〈 意 味 着 不 泻 染 它 )。 

我 们 的 策略 很 简单 。 在 C++HOpenGL 应 用 程序 中 ， 我 们 创建 了 一 个 与 图 14.12 所 示 相 同 
的 细 粒 度 噪 声 纹理 贴图 ， 以 及 随时 间 逐 渐 增 加 的 浮 点 变量 计数 器 。 然 后 ， 此 变量 在 着 色 器 
管线 中 以 统一 变量 发 送 ， 并 且 噪 声 图 也 放置 在 具有 关联 采样 器 的 纹理 贴图 中 。 然 后 片段 着 
色 器 使 用 采样 器 访问 噪声 纹理 一 一 在 这 种 情况 下 , 我 们 使 用 返回 的 噪声 值 来 确定 是 否 丢弃 该 
片段 。 我 们 通过 将 灰 度 噪声 值 与 计数 器 进行 比较 来 实现 这 一 点 ， 计 数 器 用 作 一 种 “ 阔 值 ? 
值 。 因 为 阔 值 随 着 时 间 的 推移 逐渐 变化 ， 我 们 可 以 将 其 设置 为 逐渐 丢弃 越 来 越 多 的 片段 。 
结果 是 物体 似乎 逐渐 溶解 。 程 序 14.9 显示 了 相关 的 代码 部 分 ， 它 们 被 添加 到 程序 6.1 中 的 
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地 球 演 染 球体 中 。 生 成 的 输出 如 图 14.24 所 示 。 


程序 14.9 使 用 discard 命令 的 溶解 效果 
C++ / OpenGL 应 用 程序 : 


float threshold = 0.0f; // 用 于 保留 、 丢 弃 片段 的 逐渐 增长 的 阔 值 


在 display() 中 

tLoc = glGetUniformLocation(renderingProgram, "t"); 
threshold += .002f; 

glUniformlf(tLoc, threshold); 


glActiveTexture (GL_TEXTUREO) ; 
glBindTexture(GL_TEXTURE_3D, noiseTexture) ; 


glActiveTexture(GL_TEXTURE1) ; 
glBindTexture (GL TEXTURE 2D, earthTexture) ; 


glDrawArrays(GL_ TRIANGLES, 0, numSphereVertices) ; 


片段 着 色 器 
#version 430 
in vec2 tc; // 当前 片段 的 纹理 坐标 
in vec3 origPos; // 模型 中 的 原始 顶点 位 置 ， 用 于 访问 3D 纹理 
layout (binding=0) uniform sampler3D n; // 用 于 噪声 纹理 的 采样 器 
layout (binding=1) uniform sampler2D e; // 用 于 地 球 纹理 的 采样 器 
uniform float t; // 用 于 保留 或 丢弃 片段 的 闪 值 
void main (void) 
{ float noise = texture(n, origPos) .x; // 从 片段 中 取得 噪声 值 
if (noise > t) // 如 果 噪 声 值 大 于 当前 阔 值 
{ fragColor = texture(e, tc); // 则 使 用 地 球 纹理 泻 染 片段 
} 
else 
{ discard; // BW, ERRE PERR) 


} 





图 14.24 ”使 用 discard 着 色 器 的 溶解 效果 
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如 果 可 能 ， 丢 弃 命令 应 该 谨慎 使 用 ， 因 为 它 可 能 会 导致 性 能 损失 。 这 是 因为 它 的 存在 使 
OpenGL 更 难以 优化 Z 缓冲 深度 测试 。 


补充 说 明 


在 本 章 中 ， 我 们 使 用 Perlin 噪声 生成 云 、 模 拟 木 材 和 大 理 石 般 的 石 凑 ， 并 且 用 它们 演 染 
龙 。 人 们 发 现 了 Perlin 噪音 的 许多 其 他 用 途 。 例 如 ， 它 可 用 于 创建 火焰 和 烟雾 5 AA, H 
建 逼真 的 凹凸 贴图 [5 ， 并 已 在 电子 游戏 Minecraft ”中 用 于 生成 地 形 。 

本 章 生成 的 噪声 图 基于 Lode Vandevenne M4 描述 的 程序 。 我 们 的 3D 云 生 成 仍 存在 一 
些 不 足 之 处 。 纹 理 不 是 无 颖 的 ， 所 以 在 360° 点 有 一 条 明显 的 垂直 线 (这 也 是 我 们 在 程序 
14.8 中 以 0.01 而 不 是 0.0 开始 滩 度 变量 的 原因 ， 以 避免 在 噪声 图 的 Z 维 中 遇 到 接 颖 )。 如 果 
需要 ， 也 有 用 于 去 除 接 缝 心 史 的 简单 方法 。 另 一 个 问题 是 在 天 幕 的 北峰 处 ,天 幕 中 的 球形 畸 
变 会 产生 枕 形 效应 。 

我 们 在 本 章 中 实现 的 云 也 无 法 模拟 真实 云 的 一 些 重要 方面 ， 例 如 它们 散射 太阳 光 的 方 
式 。 真 正 的 云 也 往往 在 顶部 更 白 ， 在 底部 更 灰暗 。 我 们 的 云 也 没有 达到 许多 实际 云 所 具有 
A 3D “ie” SPM. 

类 似 地 ， 存 在 用 于 产生 雾 的 更 全 面 的 模型 ， 例 如 Kilgard 和 Fernando 中 描述 的 模型 。 

在 阅读 OpenGL 文档 时 ， 读 者 可 能 会 注意 到 GLSL 包含 一 些 名 为 noisel()、noise2()、 
noise3() 和 noise4() 的 噪声 函数 , 它们 被 描述 为 采用 输入 种 子 并 产生 类 似 高 斯 的 随机 输出 。 我 
们 在 本 章 中 没有 使 用 这 些 函 数 ， 因 为 在 撰写 本 文 时 ， 大 多 数 供应 商都 没有 实现 它们 。 例 如 ， 
无 论 输入 种 子 如何 ， 许 多 NVIDIA 显卡 目前 只 会 为 这 些 函 数 返回 0 值 。 


>) el 


U 


14.1 修改 程序 14.2 以 逐渐 增加 对 象 的 Alpha 值 ， 使 其 逐渐 淡出 并 最 终 消失 。 

14.2 ”修改 程序 14.3 以 沿 水 平方 向 剪裁 环 面 ， 形 成 圆 形 “ 模 ”。 

14.3 ”修改 程序 14.4〈 包 含 图 14.10 中 修改 的 版 本 ， 产 生 3D 立方 纹理 )， 将 它 改 为 纹理 
化 Studio 522 海豚 ， 然 后 观察 结果 。 许 多 人 在 第 一 次 观察 结果 时 一 一 例如 龙 上 显示 的 结果 ， 
甚至 更 简单 的 物体 一 一 都 认为 程序 中 存在 一 些 错 误 。 即 使 在 简单 的 情况 下 ， 也 可 以 通过 从 
3D 纹理 “雕刻 ”对 象 来 产生 意外 的 表面 图 案 。 

14.4 用 于 定义 木质 “年 轮 环 ”的 简单 正弦 波 〈 如 图 14.18 所 示 ) 产生 环 ， 其 中 亮 区 和 
暗 区 的 宽度 相等 。 尝 试 修改 相关 的 fIDataArray() 函 数 ， 目 的 是 使 暗 环 的 宽度 比 光环 窄 。 然 
后 观察 对 所 得 木质 纹理 物体 的 影响 。 

14.5 (RA) 将 logistic 函数 〈 来 自 程序 14.7) 整合 进 程序 14.5 中 的 大 理 石 龙 ， 并 试 
验 设置 以 创建 更 多 不 同 的 矿脉 。 

14.6 ”修改 程序 14.9 以 包含 前 面 章节 中 描述 的 缩放 、 平 滑 、 汕 流 和 逻辑 步 又。 观察 所 产 
生 的 溶解 效果 的 变化 。 
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Mist A PC (Windows) 上 的 安装 与 设置 


如 第 1 章 所 述 , 为 了 在 你 的 计算 机 上 使 用 OpenGL 和 C++， 必 须 完 成 许多 安装 和 设置 步 
又 。 这 些 步 又 取决 于 你 所 使 用 的 平台 。 本 书 中 的 代码 示例 运行 于 PC (Windows) E; 本 附 
RA Windows 平台 提供 了 逐步 设置 的 详细 说 明 。 有 关 在 Mac 上 设置 和 运行 本 书 中 的 代码 示 
例 的 信息 ， 请 参阅 附录 B。 


A.1 安装 库 和 开发 环境 


A.1.1 安装 开发 环境 


由 于 我 们 在 本 书 的 整个 过 程 中 实现 了 多 个 项 目 , 并 且 在 OpenGL 中 有 很 多 库 需 要 协调 , 所 
以 我 们 需要 以 如 下 方式 来 设置 C++ 开发 环境 ， 以 最 大 限度 地 减少 每 个 新 建 项 目 所 需 的 配置 步 
又 。 这 里 ， 我 们 使 用 Visual Studio 2017 W171， 类 似 的 步骤 也 可 以 应 用 在 其 他 集成 开发 环境 中 。 

第 一 步 是 在 机 器 上 下 载 并 安装 Visual Studio 2017。 完 成 安装 后 , 我 们 的 方法 是 在 单个 共享 
位 置 安装 尽 可 能 多 的 库 ， 然 后 创建 一 个 Visual Studio 的 自 定义 模板 ， 之 后 ， 我 们 创建 的 每 个 
新 项 目 都 已 经 具有 必要 的 库 和 依赖 项 ， 而 不 必 重 新 定义 。 创 建 模板 的 描述 在 附录 A.2.1 中 。 


A.1.2 安装 OpenGL / GLSL 


OpenGL 或 GLSL 并 不 需要 “安装 ” 但 需要 确保 你 的 显卡 至 少 支 持 OpenGL 4.3 版 。 如 
果 你 不 知道 机 器 支持 哪 种 版 本 的 OpenGL, 可 以 使 用 各 种 免费 应 用 程序 (例如 GLView OY 
来 检查 。 


A.1.3 准备 GLFW 


第 1 章 中 给 出 了 窗口 管理 库 GLFW 的 概述 。 正 如 第 1 章 中 指出 的 ， 需 要 在 运行 它 的 机 器 
上 编译 GLFW。( 请 注意 ， 虽 然 GLFW 网 站 包含 预 编 译 好 的 二 进 制 文件 下 载 选项 ， 但 它们 经 
常 无 法 正常 运行 。) 编译 GLFW 需要 先 下 载 并 安装 CMAKE。 编 译 GLFW 的 步骤 相对 简单 。 

(1) 下 载 GLFW var or, 

(2) 下 载 并 安装 CMAKE™"), 

(3) 运行 CMAKE 并 输入 GLFW 源 代码 所 在 位 置 和 期 望 的 构建 目标 文件 夹 。 

(4) 单 击 “configure”， 如 果菜 些 选项 以 红色 高 亮 ， 请 再 次 单 击 “configure”。 

(5) Hit “generate”. 
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CMAKE 会 在 之 前 指定 的 “构建 ”文件 夹 中 生成 多 个 文件 。 该 文件 夹 中 的 一 个 文件 名 为 
“GLFW.sln”， 这 是 一 个 Visual Studio TASH. FFE (AMEE Visual Studio) 并 将 
GLFW 编译 (构建 ) 为 32 位 应 用 程序 (目前 比 64 位 更 稳定 )。 

生成 的 构建 产生 了 两 个 我 们 需要 的 项 目 : 

@ 由 之 前 的 编译 步骤 生成 的 glfw3.lib 文件 ; 

@ 原始 GLFW 下 载 源 代码 中 的 “GLFW” 文 件 夹 (可 在 “include” 文 件 夹 中 找到 ， 它 

包含 我 们 将 使 用 的 两 个 头 文件 )。 


A.1.4 准备 GLEW 


第 1 章 我 们 给 出 了 GLEW “扩展 管 理 器 ” 库 的 概述 。 从 GLEW 官网 [GE 下载 32 位 二 进 
制 文件 。 我 们 需要 获得 的 项 目 是 : 

@ glew32.lib (在 “lib” 文 件 夹 中 ); 

@ glew32.dll (在 “发 布 ”文件 夹 中 ); 

@ GL 文件 夹 ， 包 含 多 个 头 文件 (在 “include” 文 件 夹 中 )。 


A.1.5 准备 GLM 


第 1 章 给 出 了 数学 库 GLM 的 概述 。 访 问 GLM 官网 [GM171 并 下 载 包 含 发 布 说 明 的 最 新 版 
本 。 解 压缩 后 ， 下 载 文件 夹 包 含 名 为 “glm” 的 文件 夹 。 该 文件 夹 (RHA) 是 我 们 需要 
使 用 的 项 目 。 


A.1.6 准备 SOIL2 


第 1 章 给 出 了 图 像 加 载 库 SOIL2 的 概述 。 安装 SOIL2 MS*'" 需 要 使 用 一 个 名 为 “premake” 
的 工具 EM。 虽然 该 过 程 涉及 多 个 步骤 ， 但 它们 相对 简单 。 

(1) 下 载 并 解压 缩 “premake”， 其 中 唯一 的 文件 是 “premake4.exe”。 

(2) 下 载 SOIL2 使 用 左 侧 面板 底部 的 “下 载 ” 链 接 )， 然 后 解压 缩 。 

(3) 将 “premake4.exe” 文 件 复制 到 soil2 文件 夹 中 。 

(4) 打开 命令 行 窗 口 ， 导 航 到 soil2 文件 夹 ， 然 后 输入 : 


premake4 vs2012 


它 应 该 显示 随后 创建 的 文件 数量 。 

(5) 4E soil2 文件 夹 中 , 打开 “make ”文件 夹 , 然后 打开 “windows ”文件 夹 。 双 击 “SOIL2.sln”。 
(6) 如 果 Visual Studio 提示 升级 库 ， 请 单 击 “ 确 定 ” 按 钮 。 

(7) 在 右 侧面 板 中 ， 右 键 单 击 “soil2-static-lib” 并 选择 “构建 (build)”。 

(8) 关闭 Visual Studio 并 导航 回 soil2 文件 夹 。 你 应 该 注意 到 一 些 新 项 目 。 


A.1.7 ”准备 共享 的 “lib” 和 “include” 文 件 夹 
选择 你 要 存放 库 文件 的 位 置 。 你 可 以 随意 选择 任何 文件 夹 ; 例如 ， 你 可 以 创建 一 个 文件 
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夹 “C'\OpenGLtemplate”。 在 该 文件 夹 中 ， 创 建 名 为 “lib” 和 “include” 的 子 文件 夹 。 

@ 在 “lib” 文 件 夹 中 ， 放 置 glew32.lib 和 glfw3.lib。 

@ 在 “include” 文 件 夹 中 ， 放 置 前 面 描述 的 GL、GLFW 和 glm 文件 夹 。 

© 导航 回 SOIL2 文件 夹 ， 进 入 其 中 的 “lib” 文 件 夹 。 将 “soil2-debug.lib” 文 件 复制 
Fj “lib” XK (glew32.lib 和 glfw3.lib 所 在 的 文件 夹 )。 

@ 导航 回 SOIL2 文件 来， 然后 导航 到 “src” 将 “SOIL2” 文 件 夹 复 制 到 “include” 
文件 夹 (GL、GLFW 和 GLM 所 在 的 文件 夹 )。 此 SOIL2 文件 夹 包含 soil2 的 .c 和 .h 
文件 。 

@ ”你 可 能 会 发 现 将 “glew32.dll” 文 件 放 在 此 “OpenGLtemplate” 文 件 夹 中 也 很 方便 ， 
这 样 你 就 可 以 知道 在 哪里 找到 它 一 一 尽管 这 不 是 必要 的 。 

文件 夹 结构 现在 应 该 如 图 A.1 所 示 。 








OpenGLtemplate 


include glew32.dll 


glew32.lib 
glfw3.lib 
soil2-debug.lib 
eglew.h glfw3.h glm.hpp SOIL2.c 
glew.h glfw3native.h geometric.hpp SOIL2.h 
glxew.h exponential.hpp etc... 
wglew.h ete. 


图 A.1 建议 的 库 文件 夹 结构 


A.2 在 MS Visual Studio 中 开发 和 部 署 OpenGL 7 B 


创建 Visual Studio 自 定 义 项 目 模板 


因为 我 们 在 C++ / OpenGL 程序 中 使 用 了 很 多 专用 库 ， 所 以 创建 Visual Studio 模板 将 使 
启动 新 的 OpenGL 项 目 变 得 更 加 容易 。 本 节 介 绍 创建 和 使 用 此 模板 的 步骤 。 
启动 Visual Studio 〈 假 设 为 2017 版 本 )。 创 建 一 个 新 的 空 C++ 项 目 。 在 顶部 中 心 ， 菜 单 
栏 下 方 有 两 个 相 邻 的 下 拉 菜 单 。 
@ 右边 的 下 拉 菜 单 允 许 你 指定 “x86” 或 “x64” 一 一 选择 “x86”。 
o 左 侧 的 下 拉 菜 单 允 许 你 指定 是 在 “调试 ”模式 还 是 “发 布 ” 模 式 下 进行 编译 。 对 于 
这 两 个 模式 都 需要 完成 几 个 步骤 。 也 就 是 说 ， 它 们 应 该 在 “调试 ”模式 下 完成 ， 然 
后 在 “发 布 ” 模 式 下 重复 。 
先 在 “调试 ”模式 下 (然后 在 “发 布 ”模式 下 〉 进 入“ 项目 属性 ”并 进行 以 下 更 改 : 


| 
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@ 在 “VC++” 下 (也 可 以 说 是 “C/C++”)， 单 击 “ 常 规 ”， 然 后 在 “其 他 包含 目录 ” 
下 添加 你 之 前 创建 的 “include” 文 件 夹 。 
@ 在 “链接 器 ”下 ， 有 以 下 两 个 更 改 。 
(a) 单 击 “ 常 规 ” 然后 在 “其 他 库 目录 ”下 添加 先前 创建 的 “lib” 文 件 夹 。 
(b) 单 击 “ 输 入 ”， 然 后 在 “附加 依赖 项 ”下 添加 以 下 4 个 文件 名 : glfw3.lib， 
glew32.lib，soil2-debug.lib 和 opengl32.lib〈 最 后 一 个 应 该 已 作为 标准 Windows 
SDK 的 一 部 分 提供 )。 

对 “调试 ”和 “发 布 ” 模 式 的 项 目 属性 都 进行 上 述 更 改 后 ， 就 可 以 开始 创建 模板 了 。 创 
建 模板 通过 进入 “项 目 ” 菜 单 并 选择 “导出 模板 ”来 完成 。 选 择 “ 项 目 ” 模 板 ， 并 为 模板 
提供 有 意义 的 名 称 ， 例 如 “OpenGL project”. 

安装 库 并 设置 好 自 定义 模板 后 ， 创 建 一 个 新 的 OpenGL C++ 项 目 就 很 简单 了 。 

(1) 启动 Visual Studio， 在 菜单 栏 “ 文 件 ” 下 选择 “新 建 一 项 目 ”。 

(2) 使 用 OpenGL 模板 〈 现 在 显示 为 选项 ) 来 创建 项 目 。 

(3) 在 右 侧 的 解决 方案 资源 管理 器 中 ， 在 “ 源 文件 ”下 添加 “main.cpp”。 

(4) 在 右 侧 的 解决 方案 资源 管理 器 中 ， 右 键 单 击 项 目 名 称 ， 然 后 在 弹出 菜单 中 选择 “在 
文件 资源 管理 器 中 打开 文件 夹 ”。 你 应 该 在 这 里 看 到 main.cpp 文件 。 着 色 器 文件 也 将 在 开发 
期 间 放置 在 此 文件 夹 中 。 

(5) 向 上 导航 一 级 到 父 文件 夹 ， 并 将 “glew32.dll” 文 件 复制 到 “Release” 或 “Debug” 
文件 夹 中 ， 具 体 取决 于 所 需 的 解决 方案 配置 。 

在 开发 、 测 试 和 调试 应 用 程序 之 后 ， 程 序 可 以 作为 一 个 单独 的 可 执行 文件 进行 部 署 。 部 
署 时 需要 在 “发 布 ”模式 下 构建 项 目 ， 然 后 将 以 下 文件 放 在 同一 个 文件 夹 中 。 

@ 构建 项 目 时 生成 的 .exe 文件 。 

应 用 程序 使 用 的 所 有 着 色 器 文件 。 
应 用 程序 使 用 的 所 有 纹理 图 像 和 模型 文件 。 
glew32.dll. 
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如 第 1 章 所 述 ,为 了 在 机 器 上 使 用 OpenGL 和 C++， 必 须 完 成 许多 安装 和 设置 步骤 。 这 
些 步 又 取决 于 你 希望 使 用 的 平台 。 本 附录 提供 了 Macintosh(macOS) 平 台 逐 步 设 置 的 详细 说 
明 。 ARE Windows PC 上 设置 和 运行 本 书 中 代码 示例 的 信息 , 请 参阅 附录 A: PC(Windows) 
上 的 安装 与 设置 。 

在 过 去 的 几 年 中 ， 苹 果 对 Macintosh(macOS) 上 OpenGL 的 支持 逐渐 萎缩 例如， 在 撰写 
本 文 时 ,现代 Mac 仍然 只 支持 OpenGL 4.1 版 。 尽 管 如 此 ， 仍 然 可 以 对 本 书 中 的 示例 进行 一 
些 修改 来 运行 。 在 准备 必要 的 库 这 个 步骤 中 ， 第 1 章 中 描述 的 所 有 库 都 是 跨 平 台 的， 可 用 
于 苹果 Macintosh(tmacOS)。 在 某 些 情况 下 ，Mac 上 的 安装 实际 上 更 简单 。 我 们 首先 介绍 如 
何 安装 这 些 库 ， 然 后 介绍 如 何 配置 开发 环境 。 

此 外 ， 由 于 本 书 中 的 代码 示例 用 在 Windows 平台 上 ， 因 此 本 附录 提供 了 有 关 转 换代 码 
示例 的 详细 信息 ， 以 便 它 们 在 Macintosh (macOS) 上 正确 运行 。 


B.1 安装 库 和 开发 环境 


B.1.1 准备 并 安装 依赖 库 


第 1 章 概 述 了 每 个 库 的 目的 和 选择 。 我 们 不 会 在 此 重复 这 些 信息 ; 相反， 我们 专注 于 如 
何 安装 每 个 库 。 

我 们 首先 安装 GLEW 和 GLFW。 安 装 这 些 库 的 最 简单 方法 可 能 是 使 用 “Homebrew” 工 
H. Homebrew 是 一 个 软件 包 管 理 器 , 则 在 让 用 户 尽 可 能 简单 地 在 Mac 上 安装 常用 的 实用 程 
序 。 安 装 Homebrew 的 步骤 如 下 : 

(1) 打开 Safari 浏览 器 ， 访 问 Homebrew 网 站 。 

(2) 按照 Homebrew 页 面 上 的 安装 指引 进行 操作 。 具 体 来 说 , 复制 页 面 中 心 给 出 的 代码 ， 
打开 Mac 上 的 终端 窗口 ， 将 复制 的 命令 粘贴 到 其 中 ， 然 后 点 击 回 车 。 安 装 过 程 中 可 能 需要 
输入 Mac 密码 。 

(3) 不 要 关闭 终端 窗口 ， 在 接 下 来 的 步骤 中 我 们 还 会 用 到 它 。 

接 下 来 ， 使 用 新 安装 的 Homebrew 实用 程序 来 安装 GLEW 和 GLFW， 如 下 。 

C1) 仍然 在 终端 提示 符 下 输入 命令 : brew install glfw3 。 

(2) 仍然 在 终端 提示 符 下 输入 命令 : brew install glew。 

(3) 请 注意 ，/usr/local/include 路 径 下 现在 新 增 了 两 个 文件 夹 ， 分 别名 为 GL 和 GLFW. 
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接 下 来 我 们 安装 数学 库 GLM。 在 4 个 库 中 , 它 的 安装 最 简单 。 由 于 GLM 是 一 个 仅 包含 
头 文件 的 库 ， 因 此 只 需 : Ca) 按照 前 面 附录 A.1.5 节 所 述 ， 下 载 和 解压 缩 库 ; (b) 将 生成 的 
“glm” 文 件 夹 及 其 内 容 复 制 到 /usr/local/include。 

安装 SOIL2 可 能 是 安装 4 个 库 中 最 棘手 的 。 我 们 曾 使 用 如 下 步骤 成 功 安装 。 

(1) 下 载 Mac 版 本 的 SOIL2 和 premake。 

(2) 解压 缩 premake。 其 中 应 当 只 有 一 个 名 为 premake 的 可 执行 文件 。 

(3) 将 premake 可 执行 文件 复制 到 SOIL2 文件 夹 中 。 

(4) 在 终端 窗口 中 ， 导 航 到 SOIL2 文件 夹 并 输入 : 


./premake4 gmake 


(5) 仍然 在 SOIL2 文件 夹 中 ， 输 入 cd make/macosx 以 导航 到 make 文件 夹 ， 然 后 键入 : 


make 


(6) SOIL2 的 构建 应 该 会 成 功 一 一 测试 文件 可 能 会 构建 失败 (没关系 ， 它 们 对 我 们 来 说 
并 不 重要 )。 构 建 会 生成 “sre/SOIL2” 文 件 夹 ， 其 中 包含 几 个 .h 文件 ， 以 及 一 个 “lib” 文 件 
夹 ， 文 件 夹 中 包含 一 个 名 为 “libsoil2-debug.a” 的 库 文件 。 

(7) 将 包含 .h 文件 的 SOIL2 文件 夹 复 制 到 /usr/local/include。 

(8) “libsoil2-debug.a” 文 件 可 以 放 在 任何 能 够 长 期 定位 的 位 置 。 


B.1.2 准备 开发 环境 


在 撰写 本 文 时 , Mac 版 Visual Studio 2017 (在 Windows 平台 上 运行 本 书 程序 的 说 明 中 使 
用 的 开发 环境 ) 不 支持 C++。? 一 个 名 为 Visual Studio Code 的 相关 产品 可 以 用 来 开发 CH, 
但 是 幸好 Mac 上 面 有 个 更 常用 的 IDE 一 一 Xcode。 如 果 你 的 Mac 没有 安装 Xcode, 那么 需要 
先进 行 安装 ， 安 装 过 程 简单 而 直接 (虽然 速度 很 慢 ) ON, Up ay BE BEAT ERE ASE AE 
安装 最 新 版 的 Xcode。 
安装 Xcode 之 后 ,你 需要 配置 使 其 使 用 OpenGL 以 及 上 述 库 。 以 下 是 我 们 为 CHH OpenGL 
应 用 程序 成 功 设置 Xcode 的 步骤 。 
(1) 运行 Xcode, (在 macOS 标签 下 ) 创建 一 个 “command line tool”( 命 令 行 工具 ) 类 
型 的 项 目 。 将 语言 设置 为 C++。 
(2) 创建 一 个 默认 的 main.cpp， 它 包含 一 个 简单 的 “hello world” 程 序 。 在 Xcode 编辑 
器 中 ， 使 用 我 们 的 C++ / OpenGL 应 用 程序 中 的 所 需 main.cpp 代码 覆盖 该 代码 。 
(3) 设置 头 文件 搜索 路 径 ， 如 下 所 示 。 
(a) 单 击 项 目 名 称 〈 位 于 最 左 侧面 板 的 顶部 ， 蓝 色 )。 
(b) 选择 主 面板 顶部 中 心 的 “Build Settings”( 构 建设 置 ) 选 项 卡 。 
Cc) 向 下 滚动 到 “Search Paths”( 搜 索 路 径 ) 部 分 ， 确 保 上 方 过 滤器 选择 “All” 而 非 
“Basic”. 


Cd) Æ “Header Search Paths”( 头 文件 搜索 路 径 ) P, 添加 以 下 路 径 : /usr/local/include。 





© 翻译 时 的 新 版 Visual Studio 2019 也 不 支持 C++。 一 一 译 者 注 
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(4) 将 包含 “libsoil2-debug.a” 文 件 的 文件 夹 的 路 径 添 加 到 “Library Search Paths” (JÆ 
搜索 路 径 )。 它 也 位 于 “Build Settings” 中 ， 靠 近 上 一 步 中 使 用 的 头 文件 搜索 路 径 部 分 。 

(5) 为 链接 阶段 设置 二 进 制 文件 ， 如 下 所 示 。 

(a) 如 有 必要 ， 单 击 项 目 名 称 〈 位 于 最 左 侧面 板 的 顶部 ， 蓝 色 )。 

(b) 选择 主 面板 顶部 中 心 的 “Build Phases ”选项 卡 。 

Ce) 单 击 “Link Binary with Libraries” 旁 边 的 小 三 角形 打开 该 部 分 。 

(d) Æ “drag to reorder frameworks” 旁 边 应 该 有 一 个 “+”， 单 击 “+”。 

Ce) 这 里 应 该 打开 一 个 搜索 框 。 搜 索 “opengl”。 应 该 出 现 “OpenGL.framework”。 
选择 它 并 单 击 “添加 ”( 注 意 : 此 OpenGL 框架 已 存在 于 Mac 中 )。 

(f) 再 次 单 击 “+” 这 次 搜索 “core”。 应 该 出 现 “CoreFoundation Framework”。 选 
择 它 并 单 击 “ 添 加 ”( 此 库 也 已 存在 于 Mac 中 )。 

(g) 再 次 单 击 “+” 这 次 单 击 左下 方 的 “Add Other...”. 

Ch) 浏览 窗口 打开 后 ， 按 下 CMD-SHIFT-G。 会 打开 一 个 输入 框 ， 输 入 /usr/local 并 
单 击 “go”。 

G) 在 显示 的 文件 夹 结构 中 ， 导 航 到 “Cellar”， 然后 “glew” 然后 导航 到 显示 的 版 本 
号 为 名 的 文件 夹 中 ,然后 是 “lib” 文 件 夹 。 其 中 库 文件 应 以 “.dylib” 扩 展 名 显示 。 

G) 选择 适当 的 “.dylib” 库 文件 。 它 应 该 命名 为 : libGLEW.2.1.0.dylib (没有 “mx”， 
也 没有 快捷 方式 箭头 )。 选 择 后 ， 单 击 “Open” 将 其 插入 。 

(k) 对 glfw EH SER g 一 j。 它 也 在 /usrlocalCellar 中 ， 然 后 在 “glfw” 中 ， 它 的 
版 本 号 对 应 文件 夹 下 的 “lib” 文 件 夹 中 。 所 需 引 用 的 库 名 为 libglfw.3.2.dylib ( 没 
有 快捷 方式 箭头 )。 单 击 “Open” 将 其 插入 。 

(1) 对 SOIL2 库 文件 〈 我 们 在 B.1.1 小 节 中 创建 的 文件 ) 重复 该 过 程 。 即 ， 单 击 
“+”, Bait “Add Other...”, 然后 导航 到 放置 libsoil2-debug.a 文件 所 在 的 文件 夹 
中 。 选 择 该 文件 ， 然 后 单 击 “Open” 将 其 插入 。 

(6) 设置 工作 目录 ， 如 下 所 示 : 单 击 “Product” 菜 单 的 “Edit Scheme”, 选中 标记 为 “use 
custom working directory” 的 复 选 框 (Xcode10.2.1 中 ， 在 option 选项 卡 中 )。 在 下 方 的 输入 
框 中 ， 将 项 目 源 代码 文件 夹 路 径 复制 进去 〈 包 含 “main.cpp” 文 件 的 文件 夹 )。 

(7) 将 支持 文件 〈 纹 理 图 像 、 着 色 器 文件 和 其 他 支持 文件 ， 例 如 我 们 在 本 书 中 生成 的 
Utils.cpp 和 Utils.h 文件 ) 复制 到 “main.cpp” 所 在 的 同一 工作 目录 中 。 

(8) 在 最 左边 的 面板 中 ， 将 属于 C++/OpenGL 应 用 程序 〈 例 如 Utils.cpp, Utils.h, 
Sphere.cpp 等 ) 的 任何 其 他 “.cpp” 和 “.h” 文 件 添加 到 项 目 中 ， 使 它们 出 现在 “main.cpp” 
旁边 的 左 侧 面板 中 。 


B.2 修改 Mac 的 C++ / OpenGL / GLSL 应 用 程序 代码 


本 书 中 描述 的 C++ 程序 中 的 大 部 分 代码 可 以 直接 运行 。 但 是 ， 需 要 先 对 少 部 分 代码 进行 
少量 修改 。 大 多 数 更 改 在 “main.cpp” 中 的 “main() ”函数 中 。 你 可 以 进行 一 次 修改 ， 并 将 
修改 后 的 main0 函 数 复制 到 其 他 所 有 项 目 中 。 其 余部 分 的 更 改 很 小 ， 可 以 根据 需要 进行 。 
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这 部 分 描述 的 变化 在 研究 书 中 相应 的 编程 部 分 之 前 ， 没 有 太 大 意义 。 读 者 可 以 选择 跳 过 
本 节 的 部 分 内 容 ， 并 在 学 习 相 关 材 料 后 再 回来 对 照 进 行 修改 。 虽 然 可 能 存在 引起 混淆 的 风 
险 ， 但 我 们 仍然 决定 在 此 处 对 Macintosh(macOS) 平 台所 有 代码 进行 更 改 ， 以 便 将 它们 放 在 
同一 个 地 方 。 


B.2.1 修改 C++ 代码 


让 我 们 从 对 “main.cpp” 文 件 必 需 的 修改 开始 。 

@ Xcode 有 时 会 生成 大 量 的 “documentation ”警告 消息 。 这 会 使 找到 更 实质 性 的 错误 
消息 变 得 更 复杂 。 有 几 种 方法 可 以 阻止 这 些 消息 ， 最 简单 的 一 种 是 将 以 下 两 行 代码 
添加 到 “main.cpp” 的 顶部 : 


#pragma clang diagnostic push 
#pragma clang diagnostic ignored “-Wdocumentation” 


© Homebrew 将 GLEW 安装 为 Mac 上 的 静态 库 ， 因 此 需要 在 程序 顶部 ，#include 
<GL/glew.h> 命 令 的 正 上 方 添加 代码 : 


#define GLEW STATIC 


@ 7 glfwWindowHint 命令 中 , 将 “major” 上 下 文 版 本 设置 为 4, 将 “minor” 设 置 为 1。 
你 需要 紧 跟 着 现 有 的 两 个 glfwWindowHint 命令 ， 添 加 另外 两 个 glfwWindowHint 
命令 : 


glfwWindowHint (GLFW_OPENGL PROFILE, GLFW OPENGL CORE PROFILE); 
glfwWindowHint (GLFW_ OPENGL FORWARD COMPAT, GL_TRUE) ; 


需要 这 些 命令 是 因为 很 多 Mac 默认 使 用 更 老 的 OpenGL. 这 些 指令 会 强制 使 用 硬件 
能 够 支持 的 最 新 OpenGL 版 本 。 

@ 某 些 Mac( 例 如 有 具有 视网膜 显示 屏 的 Mac) 在 设置 GLFW RAO, FH 
微 复 杂 一 些 。 使 用 glfwCreateWindow0 创 建 窗口 后 ， 你 需要 从 帧 缓冲 区 中 检索 实际 
的 屏幕 尺寸 ， 如 下 所 示 : 


int actualScreenWidth, actualScreenHeight; 
glfwGetFramebufferSize (window, &actualScreenWidth, &actualScreenHeight) ; 


接 下 来 ， 在 glfwMakeContextCurrent(window) 指 令 后 ， 添 加 如 下 代码 : 
glViewport (0,0,actualScreenWidth, actualScreenHeight) ; 


这 将 确保 绘制 到 帧 缓冲 区 的 内 容 与 GLFW 窗口 中 显示 的 内 容 相 匹 配 。 
@ 最 后 ， 在 使 用 glewIitO 初 始 化 GLEW 之 前 ， 添 加 如 下 代码 : 


glewExperimental = GL_TRUE; 
B.2.2 修改 GLSL 代码 


由 于 Mac 中 使 用 稍 早 版 本 的 OpenGL (V4.1), 因此 需要 对 我 们 的 GLSL 着 色 器 代码 (以 
及 一 些 相关 的 C++/OpenGL 代码 ) 中 的 不 同位 置 进 行 一 些 修改 : 
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必须 修改 着 色 器 中 指定 的 版 本 号 。 假 设 你 的 Mac 支持 4.1 版 ， 则 在 每 个 着 色 器 的 顶 
部 找到 如 下 代码 : 


#version 430 

必须 将 其 修改 为 : 

#version 410 

4.1 版 本 的 OpenG] 不 支持 纹理 采样 器 变量 的 布局 绑 定 限定 符 。 这 会 影响 从 第 5 章 开 
始 的 内 容 。 你 需要 删除 布局 绑 定 限定 符 , 并 将 其 替换 为 另 一 个 完成 相同 操作 的 命令 。 
具体 来 说 ， 在 着 色 器 中 查找 具有 以 下 格式 的 行 : 


layout (binding=0) uniform sampler2D samp; 


绑 定 子 句 中 指定 的 纹理 单元 号 可 能 不 同 〈 此 处 为 “0”)， 并 且 采 样 器 变量 的 名 称 可 
能 不 同 〈 此 处 为 “samp”)。 在 任何 情况 下 ， 你 都 需要 删除 布局 子 句 ， 将 它 简化 为 : 


uniform sampler2D samp; 

然后 ， 你 需要 在 C++ 程序 中 为 启用 的 每 个 纹理 添加 如 下 代码 ; 
glUniformli(glGetUniformLocation(renderingProgram, “samp” ), 0); 

这 些 代 码 需 要 紧 跟 在 C++ display(0) 函 数 中 的 glBindTexture() 命 令 之 后 ， 其 中 “samp” 
是 统一 采样 器 变量 的 名 称 ,“0” 是 先前 删除 的 绑 定 命令 中 指定 的 纹理 单元 。 


B.2.3 ”补充 说 明 


路 径 名 分 隔 符 有 时 在 本 书 中 列 为 “” 对 于 Mac， 可 能 需要 将 这 些 更 改 为 “/”。 
例如 : 

#include <GL\glew.h> 

可 能 需要 更 改 为 : 

#include <GL/glew.h> 

Macintosh (macOS) 必须 支持 OpenGL 4.1 版 才能 运行 本 书 中 的 程序 。 如 果 你 不 知 
道 机 器 支持 的 OpenGL MRA, BASE RM bee HA, 


[AP18] Mac computers that use OpenCL and OpenGL graphics,” accessed September 2018. 
[GE17] OpenGL Extension Wrangler (GLEW), accessed December 2017. 

[GF17] Graphics Library Framework (GLFW), accessed December 2017. 

[GM17] OpenGL Mathematics (GLM), accessed December 2017. 

[PM17] premake homepage, accessed December 2017. 

[SO17] Simple OpenGL Image Library 2 (SOIL2), SpartanJ, accessed December 2017. 
[XC18] Apple Developer site for Xcode, accessed January 2018. 
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调试 GLSL 着 色 器 代码 非常 困难 。 与 一 般 编程 语言 (如 C++ 或 Java) 中 编程 不 同 ， 在 着 
色 器 编程 中 ， 经 常 无 法 确定 发 生 错误 的 确切 位 置 。 通 常 ， 着 色 器 错误 的 表现 只 是 白 屏 ， 而 
不 提供 有 关 错 误 性 质 的 线索 。 更 令 人 诅 丧 的 是 ， 在 运行 期 间 无 法 打印 着 色 器 变量 的 值 ， 就 
像 平时 定位 没有 头绪 的 bug 那样 。 

我 们 在 2.2 节 列 出 了 一 些 检测 OpenGL 和 GLSL 错误 的 技术 。 尽 管 这 些 技术 提供 了 一 定 
的 帮助 ， 但 缺乏 显示 着 色 器 变量 值 这 样 的 基础 功能 是 一 个 严重 的 障碍 。 

出 于 这 个 原因 ， 显 卡 制 造 商 有 时 会 在 硬件 中 提供 相关 功能 ， 使 得 可 以 在 着 色 器 运行 时 从 
其 中 提取 信息 ， 并 提供 带 图 形 界 面 的 调试 器 以 访问 这 些 信息 的 工具 。 每 个 制造 商 的 调试 工 
具 仅 适用 于 该 厂商 的 显卡 。NVIDIA 的 图 形 调 试 器 是 Nsight 工具 套件 中 的 一 部 分 ，AMD 也 
有 类 似 的 工具 套件 ， 名 为 CodeXL。 本 附录 介绍 如 何 使 用 Nsight. 


C.1 关于 NVIDIANsight 


Nsight #¢ NVIDIA 的 一 套 包 含 图 形 调 试 器 的 工具 套件 , 它 可 以 在 程序 运行 时 查看 OpenGL 
图 形 管 道 的 各 个 阶段 ， 包 括 着 色 器 。 使 用 Nsight 不 需要 更 改 或 添加 任何 代码 ， 只 要 在 启用 
Nsight 的 情况 下 运行 现 有 程序 。Nsight 允许 在 运行 时 检查 着 色 器 , 例如 查看 着 色 器 的 统一 变 
量 的 当前 内 容 。 

Nsight 有 适用 于 Windows 和 Linux / MacOS 的 版 本 ， 包 括 在 微软 的 Visual Studio CVS) 
和 Eclipse IDE 下 运行 的 版 本 。 我 们 将 讨论 限制 在 基于 Windows F., Visual Studio 版 本 的 
Nsight。( 在 本 书 的 Java 版 中 ， 我 们 描述 了 如 何在 Java 程序 中 使 用 VS 版 本 的 Nsight. ) 

Nsight 仅 适 用 于 兼容 的 NVIDIA 显卡 ,而 不 适用 于 Intel 或 AMD 显卡 .NVIDIA 网 站 S19 
提供 了 所 支持 显卡 的 完整 列表 。 


C.2 设置 Nsight 


设置 Nsight 的 过 程 简单 得 出 奇 。 以 下 步骤 基于 Nsight 版 本 5.3。 

(1) 如 果 尚 未 安装 Visual Studio(VS)， 请 安装 ， 例 如 Visual Studio 2017 社区 版 。 请 确保 
安装 组 件 中 包含 C++ 核心 编译 器 。 请 注意 ,Visual Studio 安装 可 能 非常 慢 。Visual Studio 2017 
可 在 官网 上 找到 。 

附录 A 中 给 出 了 安装 Visual Studio 的 详细 步骤 。 

(2) 安装 NVIDIA Nsight, Visual Studio Edition。 这 应 该 比 在 步骤 1 中 安装 Visual Studio 
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的 速度 快 。 安 装 时 ， 不 需要 CUDA 元 素 〈( 除 非 你 出 于 其 他 原因 需要 它们 )。 

(3) 运行 Visual Studio， 并 确保 Nsight 菜单 显示 在 菜单 栏 的 顶部 

(4) 如 果 尚 未 加 载 要 运行 的 程序 ， 请 加 载 该 程序 。 AOE RT 
目的 步骤 。 


C.3 Æ Nsight 中 运行 C++/OpenGL 应 用 程序 


(1) 在 “Nsight” 菜 单 下 〈 沿 顶部 菜单 栏 )， 选 择 “Start Graphics Debugging”, wK C.1 
所 示 。 










24] Prog4 1 4 multipleCubes - Microsoft Visual Studio 
File Edit View Project Build Debug Team 
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1 Sj#include <GL\glew.h> iis Start Performance Analysis... 








2 #include <GLFW\glfw3.h> | [Æ Enable CUDA Memory Checker 
3 #include <string> 

4 | #include <iostream> | Set Baseline 

5 #include <fstream> | Civat Baselis 

6 


| #include <cmath> | ST 
图 C.1 选择 “Start Graphics Debugging” 

(2) 单 击 后 ， 将 弹出 一 个 窗口 ， 询 问 您 是 否 要 “connect without security? ”( 无 安全 地 

连接 ? ), 单 击 “Connect unsecurely”( 不 安全 连接 )。 这 将 会 启动 CH / OpenGL 图 形 程序 。 


你 将 会 看 到 终端 窗口 和 正在 运行 的 程序 。Nsight 可 能 会 在 运行 的 程序 中 受 加 一 些 信息 ， 如 
图 C.2 所 示 。 


oa Prog! _2.4.muntipieC libes (Running) - Microsoft Visual Studio 
File Edit View Psa Build se Team Niight Toots Test Analyze Window Help 
thy ae L -一 - tlh Ste oY | | 
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图 C.2 启动 C++/ OpenGL 图 形 程序 
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(3) 当 程 序 开始 运 行 后 ， 与 任意 希望 检查 的 部 分 互动 ， 之 后 ， 在 Nsight 菜单 中 ， 单 击 
“Pause and Capture Frame”( 和 暂停 并 捕获 当前 帧 )， 如 图 C.3 所 示 。 






24] pogt1.4 multipleCubes (Running) - Micros 

















[H Prog4_1 4 multipleCubes 办 

日 #incjude <GL\glew.h> Enable CUDA Memory Checker 

| #include <GLFW\glfw3.h> 

| #include <string> 
#include <iostream> 
#include <fstream> 

| #include <cmath> 

| #include <glm\glm.hpp> 


| #include <elm\stc\tvne ntr.hnn> /外 05 Resume from Canture 


图 C.3 暂停 并 捕获 当前 帧 


(4) 接 下 来 帧 调试 器 界面 会 出 现 ， 同 时 出 现 的 还 有 一 个 HUD 工具 栏 和 称 为 “scrubber” 
的 水 平 选择 工具 。 此 程序 在 这 里 应 该 会 暂停 。 在 调试 器 屏幕 的 核心 是 左边 的 工具 栏 ， 其 中 
有 每 个 着 色 器 阶段 对 应 的 按钮 。 例 如 ， 你 可 以 单 击 高 亮 “VS”( 顶 点 着 色 器 )， 之 后 在 右 
侧 的 界面 中 ， 你 可 以 向 下 滚动 并 查看 统一 变量 的 内 容 〈 假 设 你 在 上 方 选 择 了 “API 
inspector”, API 检查 器 )。 在 图 C.4 F, “mv _matrix” 右 侧 的 小 方 框 已 打开 ， 显 示 4X4 MV 
矩阵 的 内 容 。 
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图 C.4 显示 4X4MV 矩阵 


(5) 出 现 的 另 一 个 有 趣 的 窗口 看 起 来 类 似 于 正在 运行 的 程序 。 此 窗口 底部 有 一 个 时 间 轴 ， 
你 可 以 单 击 并 查看 当前 帧 中 绘制 的 项 目的 顺序 。 图 C.5 是 一 个 示例 一 一 注意 在 时 间 轴 的 左 侧 
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区 域 单 击 光 标 ， 窗 口中 显示 了 那些 到 该 时 间 点 为 止 已 经 绘制 出 的 项 目 。 


过 Prog4_1_4_multipleCubes (Running) - Microsoft Visual Studio 
File Edit View Project Build Debug Team Nsight Tools Test Analyze Window Help 
#O-0/0@-& d dah Ga ae 






图 C.5 当前 帧 中 绘制 的 项 目 顺序 


有 关 如 何 充分 利用 Nsight 工具 的 详细 信息 ， 请 参阅 Nsight 文档 。 


[NS18] Nsight Visual Studio Edition Supported GPUs (Full List), accessed May 2018. 


